CSS Spinner Generator

Build pure-CSS loading indicators with adjustable size, color, and speed.

Preview

Settings

Style

Size 48px

Thickness / gap 4px

Speed 1.0s

Color

Track

CSS

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}