← All elements
<div class="bp2"><i></i></div>About this loader
A progress track filled with moving diagonal stripes, the classic barber-pole animation.
How it works
A repeating diagonal gradient makes the stripes, and its background-position animates by exactly one tile width per cycle so the loop is seamless. The fill's width shows the value, here 72 percent.
Ways to customise it
- Change the stripe colours.
- Edit the width for another value.
- Slow the 1s cycle.
Good to know
Use a progress element or aria attributes when it reports a real value. Stripes stop under reduced motion.
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.