Documentation
Basic
Extended
Blocks

Progress bar

HTML5 progress tag has default layout with all other colors! Some example given in below -

Default

<progress value="30" max="100"></progress>

Primary progress bar

<progress class="progress-primary" value="30" max="100"></progress>

Danger progress bar

<progress class="progress-danger" value="30" max="100"></progress>
SASS reference
$progress-background-shadow: 0 rem(2) rem(5) rgba(0, 0, 0, 0.05) inset !default;
$progress-bar-radius: $global-border-radius !default;
:root {
    --r-progress-background: var(--r-color-white-darken-5);
    --r-progress-background-shadow: #{$progress-background-shadow};
    --r-progress-bar-color: var(--r-color-white-darken-30);
    --r-progress-bar-radius: #{$progress-bar-radius};    
}