Progress

On this page

# Intro

Progress bars are classless by default.

<progress value="50" max="100"></progress>

# Colors

Progress bars have color modifiers available with -primary, -success, -warning, -danger, -dark, and -light.

<progress class="-primary" value="50" max="100"></progress>

# Sizing

Progress bars can be sized using the -small, -normal, -medium, and -large classes.

<progress class="-small" value="100" max="100"></progress>

# Indeterminate

Progress bars can be indeterminate by removing the value and/or max attribute. Indeterminate bars will be animated if prefers-reduced-motion is not set, otherwise they will be striped without animation.

<progress></progress>
<progress class="-primary" max="100"></progress>