Spiral to center loader
Dots that swirl inward in a tightening spiral, shrinking and fading as they reach the middle.
Settings
Code
<div class="ul-sp"><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></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
Everything in this loader flows toward the center, which gives it a converging, “putting it together” feel. That fits an AI image generator building a picture, a photo editor applying a filter or a tool compressing files into a zip. The alternating colors add depth to the spiral without any JavaScript, just HTML and CSS.
It is quite hypnotic, which is lovely for a few seconds and a bit much for a whole minute. For long jobs, pair it with a line of text that says what is happening. Two contrasting colors make the swirl easier to follow.