<div class="pg"><progress value="80" max="100"></progress><progress class="live" value="55" max="100"></progress><progress value="30" max="100"></progress></div>About this loader
Three progress bars styled through the native progress element, with a striped moving fill on the active one.
How it works
These bars use the native progress element, which the browser already exposes as a progress indicator. Appearance is removed, and ::-webkit-progress-bar, ::-webkit-progress-value and ::-moz-progress-bar style the track and fill. The striped bar uses a repeating-linear-gradient whose background-position animates to look like movement.
Ways to customise it
- Change the value attribute on each progress element to set the percentage.
- Edit the fill colour in the progress-value rules.
- Slow or speed the stripes by changing the animation duration.
Good to know
The progress element gives screen readers real value and maximum information. The animation is a decoration only, so users who prefer reduced motion can disable it without losing meaning.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.