Components / Atoms

Progress Bar

A block element used to display the status of an active process

Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

Default#

Shapes#

Rounded (Default)
Square
Pill

Sizes#

XS
SM
MD (Default)
LG

Tones & Variants#

Labels#

No Label
Label Start-Aligned
67%
Label Center-Aligned
67%
Label End-Aligned
67%
Value Label
33
Percent Label
67%
Value Label with Precision
33.33
Percent Label with Precision
66.67%
Custom Label via Default Slot
Progress: 33.33 / 50
Custom Label via Property
66.67%

Animation#

Animated
Indeterminate

API#

Coming Soon