← All Examples

Loading Spinners

Three spinner variants — ring, dots, and bars — built entirely with CSS animations.

Published July 4, 2026

Demo

HTML

<!-- Ring -->
<div class="spinner-ring"></div>

<!-- Dots -->
<div class="spinner-dots">
  <span></span><span></span><span></span>
</div>

CSS

/* Ring */
.spinner-ring {
  width: 40px; height: 40px;
  border: 3px solid var(--surface-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* Dots */
.spinner-dots span {
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  animation: spin-dots 1.2s ease-in-out infinite;
}
.spinner-dots span:nth-child(2) { animation-delay: .2s; }
.spinner-dots span:nth-child(3) { animation-delay: .4s; }

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

How it works

Ring spinner: a circle border with one side transparent, rotating via @keyframes. Dots spinner: three circles that scale up/down with staggered animation-delay. Bars spinner: vertical bars that animate height with staggered delays. Orbit spinner: two pseudo-elements rotating at different speeds in opposite directions using animation-direction: reverse. All use only @keyframes, border, and transforms.