Blazorise Progress component

Progress bars are used to show the status of an ongoing operation.

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>

Animated

Use an animated effect Progress Bar to show that progress is still ongoing. 
<Progress Value="75" Animated Striped />

Indeterminate

Add a Indeterminate to any Progress make the progres to the linear animation. Indeterminate Progress is best used to show that an operation is being executed. 
<Progress Indeterminate />

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 Value="25" />

Indeterminate

To make an indeterminate progress bar, simply remove Value or make it a null. 
<PageProgress Visible />

API

Attributes

Progress

Name Description Type Default
Value The progress value. int? null
Size Progress size variations. Size Default
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
Indeterminate Set to true to show that an operation is being executed. bool false
ShowValue If true, the value will be showed within the progress bar. bool true

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
Indeterminate Set to true to show that an operation is being executed. bool false

PageProgress

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