Using conic-gradient for Smooth Spinner Loaders

Hey everyone! We’ve been experimenting with conic-gradient for creating lightweight, performant spinner loaders, and the results are pretty slick. It’s a great alternative to SVG or CSS animations for simple, circular progress effects—just a few lines of code, no extra assets, and it runs smoothly across modern browsers.

If you’re looking to optimize loaders in your projects, give it a shot. Here’s a quick example to get you started:

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--progress, 0deg) #3498db, 0deg transparent);
}

Drop your thoughts or tweaks below—we’re always curious to see how others are using it!