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).