CSS Dot Loader

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
}

.demo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

/* --- Dot loader --- */
.loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38bdf8;
  animation: dotBounce 1.2s ease-in-out infinite;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  30% {
    transform: translateY(-8px) scale(1.1);
    opacity: 1;
  }
}

/* Small variant (for buttons) */
.loader--sm .dot {
  width: 6px;
  height: 6px;
}

/* Color variants */
.loader--accent .dot { background: #d946ef; }
.loader--white .dot  { background: #ffffff; }

/* Button example */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid #334155;
  background: #1e293b;
  color: #94a3b8;
  cursor: not-allowed;
}

.variants {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  background: #1e293b;
  border: 1px solid #334155;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS Dot Loader</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <!-- Standard dot loader -->
    <div class="loader" role="status" aria-label="Loading">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>

    <!-- Inline button example -->
    <button class="btn btn--loading" disabled>
      <span class="loader loader--sm" aria-hidden="true">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </span>
      Loading…
    </button>

    <!-- Color variants -->
    <div class="variants">
      <div class="loader loader--accent" aria-label="Loading">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
      <div class="loader loader--white" aria-label="Loading">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
    </div>
  </div>
</body>
</html>

A minimal three-dot bouncing loader built entirely with CSS @keyframes — zero JavaScript, zero SVG, zero dependencies.

How it works

Three <span> elements share the same bounce keyframe animation, each with a staggered animation-delay. The animation scales each dot from normal to slightly enlarged and back, creating a wave effect.

Variants

Change animation-timing-function to ease-in-out for a softer bounce
Swap scaleY for translateY for a vertical bounce
Adjust animation-duration for faster/slower rhythm

When to use it

Button loading state (inline)
Full-page loading overlay
List item placeholder while data fetches