Assets Tools HubPremium

CSS Loader Generator

Create lightweight, CSS-only loading indicators.

CSS Loader Generator

Create lightweight, CSS-only loading indicators

.loader {
  width: 48px;
  height: 48px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

About CSS Loader Generator

Zero-dependency loading animations. Design spinners, bouncing dots, and progress bars using pure CSS for maximum performance.

Something not working right?

Found a bug or have a suggestion to improve the CSS Loader Generator? Let us know and we'll fix it!