Progress bar

Progress bar are built with two HTML elements, some CSS to set the width, and a few attributes.

Toggle switch color theme
  • Blue
  • Indigo
  • Cyan
  • Green
  • Orange
  • Blush
  • Red

as per requirement you can changes accordingly for example: value, barsize, height, and color.

Bacis progress bar

Progress bar with Label

Add labels to your progress bars by placing text within the [role="progressbar"].

25%
50%
75%
100%

Height variation

We only set a height value on the [role="progress"], so if you change that value the inner [role="progressbar"] will automatically resize accordingly.

Static color variation

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

23%
58%
32%
83%
77%
10%

One color shades

Use one color shades utility classes to change the appearance of individual progress bars.

20%
30%
40%
50%
60%
70%

Multiple bars variation

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

Striped variation

Add .striped to any [role="progressbar"] to apply a stripe via CSS gradient over the progress bar's background color.

23%
58%
32%
83%
77%
10%