← All elements
<div class="tr"><div class="ring"></div><div class="dots"><i></i><i></i><i></i></div><div class="bars"><i></i><i></i><i></i><i></i></div></div>About this loader
Three loading indicators in one set: a ring, pulsing dots and rising bars, each built from CSS animations only.
How it works
Three loaders share one component. The ring is a circle with a coloured top border that rotates, the dots scale and fade one after another using staggered delays, and the bars scale vertically in a wave. All three use only transform and opacity, which the browser can animate on the GPU.
Ways to customise it
- Change each accent colour in its own rule.
- Edit the animation durations to speed them up.
- Keep only the loader you need and delete the others.
Good to know
Loaders are decorative, so add a visible or aria-live text such as Loading. Slow animations under prefers-reduced-motion keep the meaning without the intensity.
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.