Animated CSS Spinner and Loader Generator

Generate an animated CSS spinner / loader (size, color, speed) with a preview.

▸Size : 40px▸Thickness : 4px▸Speed : 0.8s

▸CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #39d353;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

🔒 100% client-side — no data sent

Generate an animated CSS spinner or loader and customize size, color, thickness and speed, then copy the ready-to-use code. A lightweight loading indicator with no images or JavaScript library. Everything is created locally in your browser.

What is it for?

▸ Add a loading indicator to a page or button
▸ Customize color, size and animation speed
▸ Get a lightweight loader with no image or JavaScript
▸ Copy pure CSS reusable in any project

FAQ

Does the spinner require JavaScript?

No, it relies only on CSS and @keyframes animation, keeping it very lightweight.

Can I change the rotation speed?

Yes, just adjust the animation duration to speed up or slow down the spinner.

Does the code work on mobile?

Yes, CSS animations are smooth and well supported on modern mobile browsers.