Hourglass loader
Sand pours from the top bulb to the bottom in a thin stream, then the hourglass flips over and starts again.
Settings
Code
<div class="ul-hg"><i></i><i></i><b></b></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
An hourglass is honest: it tells people this will take a little while. Use it when a video editor exports a clip, when an accounting tool builds a PDF report or in the virtual waiting room of a concert ticket sale. The sand drains, the thin stream stops and the glass turns over, all in pure CSS.
Save it for waits of several seconds or more; for a quick fetch the flip never even gets a chance to happen. A short note about the expected time, like “About a minute”, pairs nicely with it and takes the edge off.