Pulsing live dot

Tiny circle with an expanding ring pulse. Status indicator, scarcity pill, "available now" feel.

Animations Built JS-free

Use when — you need a small "alive" indicator. Pair with text like "2 slots left", "live", "online", "taking projects". Red for urgency/scarcity, green for availability/healthy status. Use no more than one or two on a page — pulse loses meaning if everything pulses.

Live demo

Limited slots — 2 left Available now

The code

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  position: relative;
}
.live-dot::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0  rgba(239,68,68,0.55); }
  80%  { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0  rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}

Code playbook: vault/Topics/web-patterns.md § Pattern 7 (Pulsing "live" dot animation).