A progress bar can be used to display the progress of an action or task (e.g., download progress). Progress bars should be read-only for users. A progress bar can be either determinate or indeterminate. In the determinate state, its value can be defined using aria-valuenow between 1 and 100. Indeterminate progress should be used only when the estimated time of the task cannot be calculated.
In this example, simulated determinate progress is used. To update the progress, simply change the value of aria-valuenow, and the rest will be handled automatically by JavaScript when the attribute is updated.
<div class="flexy-slider">
<input type="range" class="flexy-slider__input" id="slider-f2" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob"></div>
</div>
</div>
</div>
<br />
<div
class="flexy-progressbar"
role="progressbar"
aria-valuenow="50"
id="progressbar-f2"
>
<div class="flexy-progressbar__inactive-track"></div>
<div class="flexy-progressbar__active-track"></div>
</div>
<script type="module">
const progressbar = document.querySelector('#progressbar-f2');
const slider = document.querySelector('#slider-f2');
slider.addEventListener('input', () => {
progressbar.ariaValueNow = slider.value;
});
</script>
To use an indeterminate progress bar, simply remove the aria-valuenow attribute.
<div class="flexy-progressbar" role="progressbar">
<div class="flexy-progressbar__inactive-track"></div>
<div class="flexy-progressbar__active-track"></div>
</div>
flexy-progressbarindeterminate-animation-durationjump-animation-durationtrack-active-colortrack-heighttrack-inactive-colortrack-inactive-opacitytrack-shapeLast modified: Oct 20, 2025: docs: Fix summary breakpoints in components pages (5ac5ea3)