Basic

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

Striped

Add striped property to any Progress component to apply a stripe via CSS gradient over the progress bar’s background color.

Animated

The striped gradient can also be animated. Add animated property to Progress component to animate the stripes via CSS3 animations.

Contextual color

Use variant property to change the appearance of individual progress bars.

Label

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

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

Height

Use size property to change progress element height.

Or you can set a height value on the Progress.

Multiple

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

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020