LoveCSS.comLoveCSS

CSS Loading Spinner Generator

Circular

Dots

Bars

Shapes

Creative

Preview

Preview as:

Customize

px
8px120px
ms
100ms3000ms
px
1px20px

Your CSS

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #e5e7eb;
  border-top-color: #8b5cf6;
  animation: spin 1s linear infinite;
}

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

Your HTML

<div class="loader" role="status" aria-label="Loading"></div>

Accessibility

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader * {
    animation: none;
  }
}

About CSS Loading Spinner Generator

Create beautiful CSS loading animations visually. Customize size, speed, color, and style, then generate lightweight CSS instantly.

Related Tools

More free CSS generators you might like.

CSS Animation Generator

Create smooth keyframe animations.

→

CSS Transition Generator

Fine-tune transition timing and easing.

CSS Transform Generator

Rotate, scale and skew elements.

CSS Filter Generator

Adjust blur, contrast and more.