HTML + CSSLoaders
Sliding tiles loader
Three rounded tiles taking turns to slide around a square, like a little sliding puzzle.
Settings
72px
1x
Code
<div class="ul-grid"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
There is something satisfying about pieces shifting into place, which makes this loader a good match for tools built on grids and boards: a kanban app loading its columns, a photo gallery fetching thumbnails or a puzzle game between levels. It is plain HTML and CSS, three small blocks and a few lines of style.
Use the second color on the odd tile out so the eye can follow its path. The default pace feels thoughtful; speed it up too much and the tiles look like they are fighting over the empty spot.