Dotted ring loader
Twelve dots set like the hours on a clock, fading and shrinking one after another as the light goes round.
Settings
Code
<div class="ul-dr"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></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
With its twelve dots placed like the hours on a clock face, this loader has a patient, ticking quality. That fits moments of checking and counting: a restaurant booking widget looking for free tables, a calendar loading availability or a gallery processing the photos you just uploaded. Pure HTML and CSS, and very light.
Since the dots shrink as they fade, it looks airier than a bar spinner and suits delicate, minimal designs. Use your text color for a quiet version, or your accent color when it sits alone in the middle of an empty panel.