Progress
Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                progress: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="progress">
    <div class="progress-bar" style="width: 50%;" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
NameDescription
.progressBase class of the progress bar wrapper element
.progress > .progress-barBase class of the actual progress bar element
.progress > .progress-bar.progress-bar-stripedApplies striped progress bar style
.progress > .progress-bar.progress-bar-striped.progress-bar-animatedMakes the striped progress bar animated
Customize variables at:/library/extend/components/_progress.scss
Component's defaults:/library/components/progress/_defaults.scss
NameDefault valueNote
$progress-xsm-height3px
$progress-sm-height8px
$progress-md-height12px
$progress-height1rem
$progress-large-height1rem * 1.25
$progress-font-size$font-size-base * .75
$progress-bgproperty.get(ui-base-color-3)Requires @use "@library/sass/modules/property";
$progress-border-radius$border-radius
$progress-box-shadownull
$progress-bar-colorproperty.get(primary-contrast)Requires @use "@library/sass/modules/property";
$progress-bar-bgproperty.get(primary)Requires @use "@library/sass/modules/property";
$progress-bar-animation-timing1s linear infinite
$progress-bar-transitionwidth .6s ease

Make sure to read the Customize components and Understanding and using the design system guides.

{title}