progress bar docs

2.24.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
  • —
Open Accordion Close Accordion
min

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

 number 0
  • —

progress bar basic usage

0%
65%
100%

progress bar value format

Percent format
65%
Step format
65 / 100

progress bar max

Set max to 100 When using percent format for value.
65%
Set max to any positive number When using step format for value.
7 / 12

progress bar animated

Animated
75%

progress bar theming

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

progress bar in toolbar

Progress bar in toolbar
65%
65%
65%

progress bar use case stepper

Stepper progress
1 / 5
 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
50%
 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