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
Animated bool If true, stripes are animated right to left via CSS3 animations, stripes are automatically switched on.
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.
MaxValue float Highest possible value. Default is 100.
MinValue float Lowest possible value. Default is 0.
Striped bool If true, applies a stripe via CSS gradient over the progress bar's background color.

HxProgressBar

A progress bar to be placed inside HxProgress.

API

Parameters

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