Progress

Global variables

$progress-class: "-progress" !global
$progress-bar-class: "-bar" !global
$progress-bar-padding-vertical: $base-padding-vertical / 3
$progress-bar-padding-horizontal: $base-padding-horizontal / 1.5
$progress-font-weight: 600 !global
$progress-border-radius: 4px !global
$progress-border-width: 0px !global
$progress-border-style: solid !global
$progress-padding: 3px !global
$progress-background: #fff !global

Use widget class -progress. Apply themes and sizes. Append -bar inside -progress.

12 %
25 %
Something goes wrong

12 %

progress with shadow 42 %
25 %

progress with shadow 42 %
12 %
25 %
Something goes wrong
12 %