Progress Bars[ Variable Reference ]

Jellyfish includes a simple CSS class .progress for the native <progress> HTML element.

      
    

Indeterminate State

Displays when no value is set - it is used to show that progress is occuring but the value is not yet determined.

Known value

25%

Colors

Use the usual modifiers .primary, .secondary, .success, .warning or .error to change the progress bar color.

25% 45% 65% 85% 100%

Create-your-own

In order to create additional progress bar themes, simply add a new color to the $colors SCSS map and the framework will do the rest.