A progress bar that is 50% complete

A progress bar that is 50/100 complete

A dollar value progress bar that is $45/$50 complete

A progress bar that has gone over 100%

A progress bar that has exceeded its goal

A fundraising-style progress bar that has exceeded the goal

Displays a red progress bar

Displays a green progress bar with an animated candystripe

Displays an orange progress bar with a static candystripe

Displays a default progress bar (blue) with a static candystripe

Displays a red progress bar with no inner shadow or gradient

Displays a gray progress bar with no inner shadow or gradient and a static candystripe

Displays a red progress bar with the percent displayed to the right of the progress bar

Displays a red progress bar with a static candystripe and the percent displayed inside the progress bar.

Displays a red progress bar with the progress displayed to the right of the progress bar.

Displays a red progress bar with a static candystripe and the progress displayed inside the progress bar.

Displays a progress bar with the text “foo” displayed after the progress bar.

Displays “My awesome text” inside a 75% progress bar.

Displays “foo” after an 85% progress bar

Displays “hello!” inside an 85% progress bar (note, default location for text is inside, so it isn’t required to specify “inside”).

Displays a full-width (responsive) progress bar

Identical to the above progress bar

Main color turquoise, end color teal

Main colour and end colour in hex format

Main colour and end colour in rgb format

Displays a red progress bar that gets lighter at the bottom

Displays a red progress bar that gets darker at the bottom