Progress component

Use our progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels.

Structure

• <Progress> main component for single progress value or wrapper for multiple bars
  • <ProgressBar> progress bar for single progress value

Basic

Progress components are built with two components.

• We use the Progress as a wrapper to indicate the max value of the progress bar.
• We use the inner ProgressBar to indicate the progress so far.

Single bar

Put that all together, and you have the following examples.

<Progress Value="25" />

Multiple bars

Include multiple ProgressBar sub-components in a Progress component to build a horizontally stacked set of progress bars.

<Progress>
    <ProgressBar Value="15" />
    <ProgressBar Color="Color.Success" Value="30" />
    <ProgressBar Color="Color.Info" Value="20" />
</Progress>

Page progress

You can also show a small progress bar at the top of the page. Note that unlike regular Progress component, for PageProgress you must set the Visible parameter to make it active.

Basic

<PageProgress Visible="true" Value="25" />

Indeterminate

To make an indeterminate progress bar, simply remove Value or make it a null.

<PageProgress Visible="true" />

Attributes

Progress

Name	Type	Default	Description
Size	Size	None	Progress size variations.
Min	int	0	Minimum value of the progress bar.
Max	int	100	Maximum value of the progress bar.
Color	Color	Primary	Defines the progress bar color variant.
Striped	bool	false	Set to true to make the progress bar stripped.
Animated	bool	false	Set to true to make the progress bar animated.

ProgressBar

Name	Type	Default	Description
Value	int?	null	The progress value.
Min	int	0	Minimum value of the progress bar.
Max	int	100	Maximum value of the progress bar.
Color	Color	Primary	Defines the progress bar color variant.
Striped	bool	false	Set to true to make the progress bar stripped.
Animated	bool	false	Set to true to make the progress bar animated.

PageProgress

Name	Type	Default	Description
Value	int?	null	The progress value.
Color	Color	None	Defines the progress bar color.
Visible	bool	false	Defines the visibility of progress bar.