Progress

Use the progress component to show the indicator of completion rate or as a loader element.

There are multiple color, style, and size options available.

Basic Usage #

There are two required elements. The one with the progress class and progress__bar elements. Lastly, specify the width of the progress__bar. Follow the example below.

Color Schemes #

The default scheme is primary. If you want another scheme, add the scheme-{color} class as usual.

Labeled Progress #

Adding a label to the progress bar can help the user see more information. Create the progress__label element with text and append it to the progress bar element. The label only shows when you hover the progress. Here is an example:

33%

Progress Height #

You can set any height with height-{size} as long it is less than h-10. Set the class directly to the progress element. When the bar is thicker, you can also add text inside it. Let us show you in context.

27%

36%

44%

Striped Bar #

Try to add the progress--striped class to make it look more interesting, especially with the additional progress__animated class. Now, example time:

Messages

Notifications