← All elements
<div class="loadingspinner">
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
<div id="square4"></div>
<div id="square5"></div>
</div>About this loader
Five orange blocks that slide between grid positions to form different Tetris-style shapes, then return to the start as a loading indicator.
How it works
Five squares are positioned inside a small box with custom properties for size, offset and timing. Each square has its own keyframes that move it between grid slots with left and top, so together they form changing Tetris shapes before every block returns to its start.
Ways to customise it
- Change the darkorange block colour.
- Edit --square and --offset for bigger blocks.
- Change --duration.
Good to know
Animating left and top is fine for five small blocks, but use transforms if you scale it up. Add a text label for accessibility.
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.