progress bar docs

2.22.0

Progress Bar

Visually indicates the quantity or progression of an activity.

Published

History
View changes
Install
yarn add @bolt/components-progress-bar
Source code
View on Github
Dependencies
@bolt/core-v3.x

Overview

Progress Bar is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-progress-bar
Overview Usage Schema Edit this page

Usage

{% include "@bolt-components-progress-bar/progress-bar.twig" with { value: 65, } only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-progress-bar> tag.

 object —
  • —
value *

The current value.

 number —
  • —
valueFormat

The data format that the current value should display.

 string percent
  • percent or step
max - Minimum is 1

The maximum value.

 number 100
  • —
animated

Enables the animated background to better indicate active progress. Note: this will also automatically add a striped design to the bar when enabled.

 boolean false
  • —

Advanced Schema Options

min

The minimum value. Note: this prop is reserved for advanced usage.

 number 0
  • —

progress bar basic usage

progress bar value format

Percent format
Step format

progress bar max

Set max to 100 When using percent format for value.
Set max to any positive number When using step format for value.

progress bar animated

Animated

progress bar theming

Progress bar in xdark theme
Progress bar in dark theme
Progress bar in light theme
Progress bar in xlight theme

progress bar in toolbar

Progress bar in toolbar

progress bar use case stepper

Stepper progress Go Back Go Forward Custom JavaScript <script type="text/javascript"> window.addEventListener('load', function() { const progressBar = document.querySelector('.js-bolt-progress-bar-stepper'); const progressBarBackward = document.querySelector( '.js-bolt-progress-bar-stepper-back', ); const progressBarForward = document.querySelector( '.js-bolt-progress-bar-stepper-forward', ); if (progressBarBackward) { progressBarBackward.addEventListener('click', () => { if (progressBar.value > 0) { progressBar.value -= 1; } }); } if (progressBarForward) { progressBarForward.addEventListener('click', () => { if (progressBar.value < progressBar.max) { progressBar.value += 1; } }); } if (progressBar) { progressBar.addEventListener('rendered', function() { if (progressBar.value === 1) { progressBarBackward.setAttribute('disabled', ''); } if (progressBar.value === progressBar.max) { progressBarForward.setAttribute('disabled', ''); } if (progressBar.value > 1) { progressBarBackward.removeAttribute('disabled'); } if (progressBar.value < progressBar.max) { progressBarForward.removeAttribute('disabled'); } }); } }); </script>

progress bar use case loading animation

Loading animation Hang tight before resetting... Custom JavaScript <script type="text/javascript"> window.addEventListener('load', function() { const progressBar = document.querySelector('.js-bolt-progress-bar-loading'); const progressBarReset = document.querySelector( '.js-bolt-progress-bar-loading-reset', ); let progressBarInitialValue; function autoIncrementProgressBar() { progressBarInitialValue = progressBar.value; const myVar = setInterval(myTimer, 250); function myTimer() { progressBar.value += 1; if (progressBar.value >= progressBar.max) { clearInterval(myVar); progressBar.animated = false; progressBarReset.removeAttribute('disabled'); progressBarReset.textContent = 'Click to reset'; } } } if (progressBar) { autoIncrementProgressBar(); } if (progressBarReset && progressBar) { progressBarReset.addEventListener('click', () => { progressBar.value = progressBarInitialValue; progressBar.animated = true; progressBarReset.setAttribute('disabled', ''); progressBarReset.textContent = 'Hang tight before resetting...'; autoIncrementProgressBar(); }); } }); </script>

progress bar with web component

Web Component Usage Bolt progress-bar is a web component, you can simply use <bolt-progress-bar> in the markup to make it render.
<bolt-progress-bar value=65></bolt-progress-bar>
Prop Usage Configure the <bolt-progress-bar> with the properties specified in the schema.
<bolt-progress-bar value=7 value-format="step" max=12 animated></bolt-progress-bar>
Debug Panel