Progress Bars

Custom classes for styling progress bars. Does not work in Edge or IE, so use with caution (i.e. the content on the page should not be dependent on these colors to communcate essential information or function).

Default appearance, indefinite

Default appearance, definite

Basic progress with .progress class

<progress class="progress" max="#" value="#"></progress>

Basic Colors

Basic progress bar colors. Theme based on the $default-text-color value.

.progress_color-theme

.progress_color-neutral

.progress_color-red

.progress_color-orange

.progress_color-yellow

.progress_color-green

.progress_color-blue

.progress_color-purple

Stripes & Gradients

For gradients, use .progress_color-gradient-<color name>. For striped variants, use .progress_color-striped-gradient-<color name>.

gray

darkgray

mint

candycane

cool

warm

Non-linear progress bars

Requires a parent div with class .nonlinear-progress around two progress bars, the first to represent the negative value and the second the positive value. For display purposes, a negative value must be converted to a positive when adding it to the progress' value attribute.

Exact appearance will vary by browser. There may also be more modern approaches for styling progress bars since this solution.

negative / positive

neutral / blue

<div class="nonlinear-progress">
	<progress class="progress progress_color-negative" max="#" value="#"></progress>
	<progress class="progress progress_color-positive" max="#" value="#"></progress>
</div>