Self-drawing circle
An arc that grows, spins and shrinks again in one fluid loop, the style made familiar by Android.
Settings
Code
<svg class="ul-dc" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" pathLength="100"/></svg>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
If your users are used to Android or Google apps, this Material-style spinner will feel instantly familiar. It works for pull-to-refresh on a news site, the loading state of a sign-in form or a list of messages being fetched. The arc stretches and shrinks as it rotates, so it never looks frozen.
It only uses the main color, which makes it one of the most neutral loaders here. Sizes between 24 and 48 pixels feel right in most interfaces. If you need something with more personality, this is not it, and that is its strength.