Progress

Examples

A progress bar can be used to show a user how far along he/she is in a process.

Examples

Add labels to your progress bars by placing text within the Progress.

10%
25%
50%
75%
100%

Size

Use Size utility classes to change the size of individual progress bars.

Contextual colors

Use Color utility classes to change the appearance of individual progress bars.

Multiple bars

Include multiple progress bars in a progress component if you need.

15
30
20

Animated stripes

The striped gradient can also be animated.

Striped Example

Uses a gradient to create a striped effect