← All elements
<div class="ob"><i class="d1"></i><i class="d2"></i><i class="d3"></i><b></b></div>About this animation
Three dots circling a centre at different speeds, a compact loading indicator made from rotating wrappers.
How it works
Three wrappers are layered and each rotates around the centre at a different speed. A dot sits at the top of each wrapper through ::before, so rotating the wrapper makes the dot circle. The middle wrapper turns in reverse, and a glowing circle in the centre acts as the core.
Ways to customise it
- Change the three dot colours.
- Edit the 1.4s, 2.2s and 3s durations.
- Change the insets to space the orbits differently.
Good to know
Add a text such as Loading for assistive technology. The rotation slows under reduced motion. Only rotation is animated, so it stays smooth.
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.