HxProgress

Bootstrap 5 Progress component.
A wrapping component for the HxProgressBar.

Example

<HxProgress>
    <HxProgressBar Value="50" />
</HxProgress>

Labels

50%
<HxProgress>
    <HxProgressBar Value="50" Label="50%" />
</HxProgress>

Height

<HxProgress Height="2">
    <HxProgressBar Value="50" />
</HxProgress>

Backgrounds

Multiple bars

<HxProgress>
    <HxProgressBar Value="15" Color="ThemeColor.Primary" />
    <HxProgressBar Value="30" Color="ThemeColor.Success" />
    <HxProgressBar Value="20" Color="ThemeColor.Info" />
</HxProgress>

Striped

Animated stripes

When the parameter HxProgressBar.Animated is set to true, stripes are automatically switched on and animated.

<HxProgress>
    <HxProgressBar Value="75" Animated="true" />
</HxProgress>

Setting parameters

Some parameters can be set for all progress bars at once on the HxProgress component. Inherited values can be overriden on the child components.

<HxProgress Animated="true">
    <HxProgressBar Value="15" Color="ThemeColor.Primary" />
    <HxProgressBar Value="30" Color="ThemeColor.Success" />
    <HxProgressBar Value="20" Color="ThemeColor.Info" Animated="false" Striped="true" />
</HxProgress>

Scale

You can set a scale for the progress bar, for example from -100 to 100 as shown below. Supplied values are going to be normalized according to the MinValue and MaxValue set. Default is 0 and 100.

<HxProgress MinValue="-100" MaxValue="100">
    <HxProgressBar Value="50" />
</HxProgress>

Interactive

The progress value can be easily changed at runtime. When that occurs, the progress bar updates with an animation.

API

Parameters

Name Type Description
ChildContent RenderFragment Content consisting of one or multiple HxProgressBar components.
CssClass string Additional CSS classes for the progress.
Height int Height of all inner progress bars. Default is 15px.
MinValue float Lowest possible value. Default is 0.
MaxValue float Highest possible value. Default is 100.
Striped bool If true, applies a stripe via CSS gradient over the progress bar's background color.
Animated bool If true, stripes are animated right to left via CSS3 animations, stripes are automatically switched on.

HxProgressBar

A progress bar to be placed inside HxProgress.

API

Parameters

Name Type Description
ChildContent RenderFragment Inner content of the progress bar.
CssClass string Additional CSS classes to be applied to the progress bar.
Value float Current value (proportion of the progress bar that is taken up).
MinValue float? Lowest possible value. Default is 0.
MaxValue float? Highest possible value. Default is 100.
Label string Text to be displayed on the progress bar.
Color ThemeColor? Fill (background) color of the progress bar.
Striped bool? If true, applies a stripe via CSS gradient over the progress bar's background color.
Animated bool? If true, stripes are animated right to left via CSS3 animations, stripes are automatically switched on.
An unhandled error has occurred. Reload 🗙