← All elements
<div class="load">
<hr /><hr /><hr /><hr />
</div>About this loader
Four flat circles in teal, red, orange and navy that trade places around a square in a smooth loop.
How it works
Four circles are placed in the corners of a square. A single keyframe moves each one to the next corner in turn, and negative delays in steps of half a second stagger them so three circles are always travelling around the fourth.
Ways to customise it
- Change the four flat colours.
- Edit the 160 percent travel distances.
- Change the 2s duration.
Good to know
A very small, low cost loader that is easy to read. Add a text label such as Loading for assistive technology.
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.