🍱 Lunchbox Hands

CSS Loading Spinner Generator

Pick from 16 pure-CSS loading spinners and copy the code

Pick a loading spinner, tune its color, size, and speed, and copy the pure-CSS snippet — HTML included where needed. 16 spinners, no libraries, no GIFs. Everything runs in your browser.

Ring
Dual Ring
Dashed Ring
Bouncing Dots
Bars
Pulse
Ripple
Orbit
Grid
Ellipsis
Roller
Square Flip
Chase
Hourglass
Comet
Heartbeat
px
s
px
#6366f1
.lb-spin-ring {
  width: 48px; height: 48px;
  border: 4px solid color-mix(in srgb, #6366f1 25%, transparent);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: lb-ring-spin 1s linear infinite;
}
@keyframes lb-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lb-spin-ring, .lb-spin-ring > *, .lb-spin-ring::before, .lb-spin-ring::after {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips