Progress

Documentation and examples for using Chubby custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Basic Progress Bars

Progress components are built with two HTML elements: .progress as a wrapper and .progress-bar for the indicator.

Labels

Add labels to your progress bars by placing text within the .progress-bar.

25%

Password Strength Progress Bars

Thin progress bars useful for password strength indicators.

Backgrounds

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

Multiple Bars

Include multiple progress bars in a progress component.

Striped

Add .progress-bar-striped to apply a stripe via CSS gradient.

Animated Stripes

Add .progress-bar-animated to animate the stripes right to left via CSS3 animations.