Cargando
HTML + CSSLoaders
Flipping tiles loader
Nine tiles flip in 3D in a diagonal wave and change color as they turn over.
Settings
16px
1x
Code
<div class="uv-lft" role="status"><span class="sr">Loading</span><i style="--d:0"></i><i style="--d:1"></i><i style="--d:2"></i><i style="--d:1"></i><i style="--d:2"></i><i style="--d:3"></i><i style="--d:2"></i><i style="--d:3"></i><i style="--d:4"></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
See all LoadersWhere to use it
A grid of tiles reads as building, assembling or generating, which makes it a good fit for dashboards, design tools and image generators. Each tile flips around its vertical axis with a 3D perspective, the wave travels diagonally from the top left corner, and the tiles switch to the second color on their back side before flipping home.
The pattern is nine elements and one keyframe with staggered delays, so it is light even on mobile. Change the two colors to brand tones and the speed to make the wave calm or energetic.