progress bar docs

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>