Cirrus

#Progress

New
0.7.0

Cirrus comes with styling right out of the box for the progress HTML element.

#Basics

There are no additional instructions to using the progress element besides just delcaring it inside your HTML markup.

25%
<progress class="progress" value="25" max="100">25%</progress>

#Sizes

Progress bars currently come in 5 different sizes: xs, sm, md, lg, and xl.

15%15%15%15%15%
<progress class="progress progress--xs" value="15" max="100">15%</progress>
<progress class="progress progress--sm" value="15" max="100">15%</progress>
<progress class="progress progress--md" value="15" max="100">15%</progress>
<progress class="progress progress--lg" value="15" max="100">15%</progress>
<progress class="progress progress--xl" value="15" max="100">15%</progress>

#Colors

Like with other controls, progress bars can be themed using all v1 colors.

15%15%15%15%15%15%15%15%
<progress class="progress progress--primary" value="15" max="100">15%</progress>
<progress class="progress progress--gray" value="25" max="100">15%</progress>
<progress class="progress progress--dark" value="35" max="100">15%</progress>
<progress class="progress progress--link" value="45" max="100">15%</progress>
<progress class="progress progress--info" value="55" max="100">15%</progress>
<progress class="progress progress--success" value="65" max="100">15%</progress>
<progress class="progress progress--warning" value="75" max="100">15%</progress>
<progress class="progress progress--danger" value="85" max="100">15%</progress>

#Indeterminate

If you omit the value attribute for the progress bar, it will be set to the indeterminate state. It'll look like the ones below.

15%15%15%15%15%15%15%15%
<progress class="progress progress--primary progress--xs" max="100">15%</progress>
<progress class="progress progress--gray progress--sm" max="100">15%</progress>
<progress class="progress progress--dark progress--sm" max="100">15%</progress>
<progress class="progress progress--link progress--md" max="100">15%</progress>
<progress class="progress progress--info progress--md" max="100">15%</progress>
<progress class="progress progress--success progress--lg" max="100">15%</progress>
<progress class="progress progress--warning progress--lg" max="100">15%</progress>
<progress class="progress progress--danger progress--xl" max="100">15%</progress>