3D cube loader
An isometric cube spinning on its axis, each face in a slightly different shade so it reads as solid.
Settings
Code
<div class="ul-cube-w"><div class="ul-cube"><i></i><i></i><i></i><i></i><i></i><i></i></div></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
A 3D cube loader in pure CSS says “packages” and “building blocks” without a word. Use it on the tracking page of a shipping company, while a 3D product configurator prepares its model or during the upload step of a cloud storage app. The faces are shaded so it looks solid, with no images or libraries.
Choose a mid-tone main color: the side faces are darkened from it automatically, so a very dark color leaves no contrast. Make the second color lighter, since it paints the top and bottom and gives the cube its light.