Commentary

Uses native HTML progress tag to build progress bar that can be used to show task progress or used as a horizontal data bar. Bar label and data value can be optionally shown.

Note that Safari and Firefox do not support the ::after pseudo selector and so we need to use a more complex method to display the value with the progress bar.

Usage

Classes:
progress HTML tag that gets styled.
.progress-wrapper Optional modifier for a label HTML tag that wraps the progress tag. This accommodates a bar label and can show a data value.
Size options: .is-small, .is-medium, .is-large
Colour options: .is-progress-primary, .is-progress-secondary, .is-progress-tertiary, .is-progress-link, .is-progress-success, .is-progress-warning, .is-progress-primary, .is-progress-danger,
Dependencies:
File: progress_bars.css
Variables: --base-rem,--base-scale, --bg-element, --danger, --black-ter, --link, --mar-horz, --mar-vert, --primary, --secondary, --size-4, --size-5, --size-7, --success, --tertiary, --warning

Examples

Default Bar, no label and no frills

15% 

                <progress value="15" max="100">15%</progress>

                <label class="progress-wrapper" data-show="30%">
                    Default bar with label and data-show value
                    <progress value="30" max="100">30%</progress>
                </label>

                <label class="progress-wrapper" data-show="25%">
                    .is-progress-primary
                    <progress class="is-progress-primary" value="25" max="100">25%</progress>
                </label>

                <label class="progress-wrapper" data-show="50%">
                    .is-progress-secondary
                    <progress class="is-progress-secondary" value="50" max="100">50%</progress>
                </label>

                <label class="progress-wrapper" data-show="75%">
                    .is-progress-tertiary
                    <progress class="is-progress-tertiary" value="75" max="100">75%</progress>
                </label>

                <label class="progress-wrapper" data-show="100%">
                    .is-progress-link
                    <progress class="is-progress-link" value="100" max="100">100%</progress>
                </label>

                <label class="progress-wrapper is-small" data-show="55%">
                    .is-small .is-progress-success
                    <progress class="is-progress-success" value="55" max="100">55%</progress>
                </label>

                <label class="progress-wrapper is-medium" data-show="45%">
                    .is-medium .is-progress-warning
                    <progress class="is-progress-warning" value="45" max="100">45%</progress>
                </label>

                <label class="progress-wrapper is-large" data-show="35%">
                    .is-large .is-progress-danger
                    <progress class="is-progress-danger" value="35" max="100">35%</progress>
                </label>

                <label class="progress-wrapper">
                    .is-progress-primary with indeterminate value
                    <progress class="is-progress-primary" max="100"></progress>
                </label>