← Back to gallery
CSS

Border-trick Ring Spinner

A project-authored CSS loader showcase where border-radius, side-specific border colors, and counter-rotating pseudo-element rings produce classic, dual-ring, and two-tone border spinners.

Duration
2s
Resolution
1440×900
Format
CSS
spinnerloaderborderborder-radiusdual-ring

Spinner / border-trick / ring

Border-trick ring spinners

Reimplements the classic CSS spinner with a rounded square and side-specific border colors, then extends the primitive into a dual-ring counter-rotation and a two-tone halves variant.

classic border spinner — 0.90s · 7px border

Three transparent sides + one accent

Classic Border Spinner

A square with 50% border-radius becomes a ring. Coloring a single border side produces the classic quarter-segment spinner.

0.9s · linear · single ring · 1 accent side

  • border-trick
  • one-accent
  • layout-safe

Two rings + opposite spin

Dual Ring

A pseudo-element ring sits inset from the outer ring and rotates the opposite way. The counter-rotation adds mechanical weight without moving the layout.

1.3s · linear · opposite spin · outer ring + inset inner ring

  • dual ring
  • counter-rotation
  • pseudo-element

Two colored halves + steady spin

Two-tone Halves

Two opposing border sides take contrasting hues. The ring reads as a full loop but the color split gives the rotation a visible reference point.

1.1s · linear · single ring · 2 colored sides

  • two-tone
  • directional cue
  • hero loader

Ring inspector

Classic Border Spinner

Speed
0.90s · linear
Border
7px

Transform-based rotation keeps the layout untouched while the visible segment sweeps. Thickness and accent come from border-width alone.

Live controls

css
.border-ring {
  width: 86px;
  aspect-ratio: 1;
  border: 7px solid rgba(103, 232, 249, 0.18);
  border-top-color: rgba(103, 232, 249, 0.95);
  border-radius: 50%;
  animation: borderRingSpin 0.90s linear infinite;
}

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