progress bar docs

Progress Bar

Visual indicator for the progression of an activity.
Twig 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
  • —
Install Install 
npm install @bolt/components-progress-bar
Dependencies @bolt/core

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