HTML + CSSLoaders
Concentric orbits loader
Three nested arcs spinning at different speeds, with the middle one going the other way.
Settings
72px
1x
Code
<div class="ul-orb"><i></i><i></i><i></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
Three rings turning at their own pace give a sense of complex work going on, like gears or planets. That makes this loader a good fit for an astronomy blog, the analysis step of a data tool or an AI feature that takes a few seconds to answer. It is pure CSS and scales cleanly to any size.
Because the arcs cross over each other, it shines at medium and large sizes and gets busy when tiny. Give the middle ring the second color; the contrast makes the counter-rotation easy to see.