{% include '@bolt-components-progress-bar/progress-bar.twig' with {
value: 65,
} only %}| 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
|
|
|
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
|
|
|
min
|
The minimum value. Note: this prop is reserved for advanced usage. |
number
|
0
|
|
npm install @bolt/components-progress-bar<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><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><bolt-progress-bar> in the markup to make it render.
<bolt-progress-bar value=65></bolt-progress-bar><bolt-progress-bar> with the properties specified in the schema.
<bolt-progress-bar value=7 value-format="step" max=12 animated></bolt-progress-bar>