HTML + CSSLoaders
Conic gradient ring
A ring painted with a spinning conic gradient that fades out to nothing, around a hollow center.
Settings
72px
1x
Code
<div class="ul-conic"></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
This gradient spinner feels modern and polished, which suits fintech and SaaS products: the moment a payment is being processed, the pause after signing up for a free trial or the screen that connects a bank account. The color fades around the ring, so it has a clear head and a soft tail.
Use your brand gradient here: the two colors blend along the ring, and a pair like violet and blue looks great. The center is truly hollow, so the ring also sits well on colored cards and photos.