progress bar docs

Progress Bar

Visual indicator for the progression of an activity.

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage
Twig 
{% 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
  • —
Install Install
Bash 
npm install @bolt/components-progress-bar
Dependencies @bolt/core-v3.x

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 dark theme
Progress bar in light theme

progress bar in toolbar

Progress bar in toolbar

progress bar use case stepper

Stepper progress Custom JavaScript
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 Custom JavaScript
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.
HTML 
<bolt-progress-bar value=65></bolt-progress-bar>
Prop Usage Configure the <bolt-progress-bar> with the properties specified in the schema.
HTML 
<bolt-progress-bar value=7 value-format="step" max=12 animated></bolt-progress-bar>