Progress

Basic example

Animated transition

If the value of the progress bar is changed programmatically, it will animate to the new value. Try clicking one of the buttons below to add or subtract from the progress bar's value.

Showing the value

These examples show how to make the value of the progress bar visible, and how to format it to display in whatever way you want.

20%

2 of 10

2/10

Customized height

The height of the progress bar is customizable. The indicator circle will scale proportionally.

Dynamic height change

The height of the progress bar can also be changed dynamically as needed.

Hide glow and indicator circle

This example shows how to hide the glow and indicator circle for a simpler progress bar.

Props

Name: formatter

Type: Function

Default: (val: number) => `${val}%`

Description: Allows controlling the display of the value displayed when showValue is set to true.

Name: height

Type: String

Default: 0.125rem

Description: Specifies height of the progress bar.

Name: showCircle

Type: Boolean

Default: true

Description: Set to false to hide the indicator circle.

Name: showGlow

Type: Boolean

Default: true

Description: Set to false to hide the glow around the bar.

Name: showValue

Type: Boolean

Default: false

Description: When present, it shows the progress bar value below the bar.

Name: value

Type: Number

Default: n/a

Description: Required. A value between 0 and 100 representing the progress.

Name: valueClass

Type: String

Default: ''

Description: Allows control of styling for the value displayed when showValue is set to true.