← All elements
<section>
<div class="loader">
<div class="dot" style="--i:0"></div>
<div class="dot" style="--i:1"></div>
<div class="dot" style="--i:2"></div>
<div class="dot" style="--i:3"></div>
<div class="dot" style="--i:4"></div>
<div class="dot" style="--i:5"></div>
<div class="dot" style="--i:6"></div>
<div class="dot" style="--i:7"></div>
<div class="dot" style="--i:8"></div>
<div class="dot" style="--i:9"></div>
</div>
<h2>Loading...</h2>
<div class="loader">
<div class="dot" style="--i:0"></div>
<div class="dot" style="--i:1"></div>
<div class="dot" style="--i:2"></div>
<div class="dot" style="--i:3"></div>
<div class="dot" style="--i:4"></div>
<div class="dot" style="--i:5"></div>
<div class="dot" style="--i:6"></div>
<div class="dot" style="--i:7"></div>
<div class="dot" style="--i:8"></div>
<div class="dot" style="--i:9"></div>
</div>
</section>About this loader
Two rows of glowing dots that swell in sequence under a loading label, while the whole scene slowly cycles through the colour wheel.
How it works
Two rows of dots share one animation that scales each dot from tiny to full size with a staggered delay taken from a custom property. The second row uses negative delays so it moves the other way. A hue-rotate filter on the whole section turns the green glow through every colour.
Ways to customise it
- Change #00ff0a to start from another hue.
- Edit the 0.1s delay step for a tighter or looser wave.
- Change the 5s hue cycle.
Good to know
Strong glows on a dark background are easy to see but tiring, so keep it to short waits. The Loading text gives people who cannot see the dots the same message.
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.