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>
$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};
}