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