← All elements
<div class="loader">
<div class="loader-container">
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
<div class="loader-block"></div>
</div>
</div>About this loader
A grid of red square tiles that dip and fade one after another in a wave, centred on a light background.
How it works
Sixteen small red squares float inside a fixed grid. Each has the same wave keyframe that moves it down thirty pixels while fading it, and the delays are staggered so the dip travels across the grid like a ripple.
Ways to customise it
- Change #ff2d37 to recolour the tiles.
- Edit the 30px travel distance.
- Adjust the staggered delays.
Good to know
The wrapper is position fixed and fills its frame, so place it in a container before reuse. Give assistive tools a text label for the loading state.
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.