← Back to gallery
CSS

Conic-gradient Spinner

A project-authored CSS loader showcase where conic-gradient arcs and a radial mask carve a spinning ring out of a single element, with single-arc, dual-arc, and segmented fade variants.

Duration
2s
Resolution
1440×900
Format
CSS
spinnerloaderconic-gradientmaskrotate

Spinner / conic-gradient / mask

Conic-gradient spinner arcs

Reimplements the CSS spinner with a conic-gradient arc and a radial mask so the ring stays thin without SVG, GIF, or border tricks.

quarter arc spinner — 1.10s · 18% thickness

Single accent arc + radial mask

Quarter Arc

A conic-gradient paints one bright 90° arc and a transparent remainder. A radial mask carves the center out so the arc rides a clean ring.

1.1s · linear · 90° arc + 270° transparent

  • quarter arc
  • radial mask
  • single loop

Two opposing arcs + uniform speed

Dual Arc

A second arc sits 180° opposite the first. Both share the same hue so the spin reads as a balanced orbit rather than a single head.

1.6s · linear · 2 × 60° arcs + 2 × 120° gaps

  • dual arc
  • balanced orbit
  • panel-scale

Tapered hue stops + slow sweep

Segmented Trace

Multiple color stops inside the conic fade the arc across its span. The slower duration leans into an ambient look for long-running jobs.

2.4s · linear · gradient fade across 150°

  • trace
  • ambient speed
  • gradient edge

Arc inspector

Quarter Arc

Speed
1.10s · linear
Thickness
18% of radius

The ring rotates as a whole. Because only the arc is colored, the spinner reads as a moving indicator instead of a filled wheel.

Live controls

css
.conic-ring {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(103, 232, 249, 0.98) 0deg 90deg, rgba(103, 232, 249, 0) 90deg 360deg);
  mask: radial-gradient(circle, transparent calc(50% - 18%), #000 calc(50% - 18%));
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 18%), #000 calc(50% - 18%));
  animation: conicSpin 1.10s linear infinite;
}

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