HxProgress #

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

Basic usage #

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

Labels #

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

Height #

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

Backgrounds #

MultipleBars #

<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 enabled 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 overridden 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 normalized according to the MinValue and MaxValue set. The default values are 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, the stripes are animated right to left using CSS3 animations. The 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. The default value is 15px.
MaxValue float Highest possible value. The default value is 100.
MinValue float Lowest possible value. The default value is 0.
Striped bool If true, applies a stripe via CSS gradient over the background color of the progress bar.

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 filled).
An unhandled error has occurred. Reload 🗙