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

Examples

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.
15
30
20
<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

To show page progress just set the Value and Visible parameters.
<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 Description Type Default
Value The progress value. int? null
Size Progress size variations. Size None
Min Minimum value of the progress. int 0
Max Maximum value of the progress. int 100
Color Defines the progress bar color variant. Color Primary
Striped Set to true to make the progress bar stripped. bool false
Animated Set to true to make the progress bar animated. bool false

ProgressBar

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

PageProgress

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