Progress bar

Progress component allows to use progress bar.

Quick demo

Preview of the progress component.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/progress/styles";

JavaScript

Progress work well without JS, but is recommended to use the JS for smoothie integration. The attribute data-progress is mandatory with JS usage.

javascript
import { BDCProgress } from '@iraiser/biscuit-design-components/components/progress';

let progress = new BDCProgress(document.querySelector('.bdc-progress'));

HTML structure

html
<div class="bdc-progress" data-progress="0.85">
    <div class="bdc-progress__control"></div>
</div>

The data-progress attribute only accept number between [0, 1].

Variants

Without JS

html
<div class="bdc-progress">
    <div class="bdc-progress__control" style="width: 85%;"></div>
</div>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/progress";

.foo-progress {
    --bdc-theme-primary: #0971b3;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/progress";

.foo-progress {
    @include progress.progress-color(#0971b3);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-progressMandatory.
bdc-progress__controlIndicates the control container.

Sass mixins

Custom your own progress bar easily with the public Sass mixins.

MixinDescription
fill-color($color)Set the container fill color.
progress-color($color)Set the progress bar color.
density($scale)Set the density on progress bar.
1, 0 (default) or -1.

JavaScript API

Getters & Setters

Public accessors from BDCProgress class.

AccessorTypeDescription
progressnumberMethod for "get" & "set" the progression number between [0, 1].
Menu