← All elements
<div class="pw"><i></i><i></i><i></i><i></i><i></i></div>About this loader
Five bars that rise and fall in a travelling wave, a calm alternative to a spinner.
How it works
Five bars use the same height keyframe with a 0.1 second delay between neighbours, so the tall point of the wave travels left to right. The bars have a vertical gradient from teal to blue.
Ways to customise it
- Add more bars.
- Edit the 52px peak height.
- Change the gradient.
Good to know
Provide a text alternative such as Loading. A static row replaces the motion 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.