25 CSS Spinners 12 / 25

Ripple Pulse Ring Spinner

Four concentric rings expand outward from a solid azure dot in sequence, each fading from full opacity to invisible as it reaches its maximum radius — like rings in water.

Pure CSS MIT licensed

Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="sp-12">
  <div class="sp-12__ripple">
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__dot"></div>
  </div>
</div>

<div class="sp-12">
  <div class="sp-12__ripple">
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__dot"></div>
  </div>
</div>

.sp-12,.sp-12 *,.sp-12 *::before,.sp-12 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-12{
  --bg:#060810;
  --c:#29b6f6;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-12__ripple{
  position:relative;
  width:80px;
  height:80px;
}
.sp-12__ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--c);
  opacity:0;
  animation:sp-12-ripple 2s ease-out infinite;
}
.sp-12__ring:nth-child(1){inset:0;animation-delay:0s}
.sp-12__ring:nth-child(2){inset:0;animation-delay:0.5s}
.sp-12__ring:nth-child(3){inset:0;animation-delay:1s}
.sp-12__ring:nth-child(4){inset:0;animation-delay:1.5s}
.sp-12__dot{
  position:absolute;
  inset:30px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 12px var(--c),0 0 24px rgba(41,182,246,0.4);
}
@keyframes sp-12-ripple{
  0%{transform:scale(0.1);opacity:1}
  100%{transform:scale(1.8);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-12__ring{animation:none;opacity:0.3;transform:scale(1)}
}

.sp-12,.sp-12 *,.sp-12 *::before,.sp-12 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-12{
  --bg:#060810;
  --c:#29b6f6;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-12__ripple{
  position:relative;
  width:80px;
  height:80px;
}
.sp-12__ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--c);
  opacity:0;
  animation:sp-12-ripple 2s ease-out infinite;
}
.sp-12__ring:nth-child(1){inset:0;animation-delay:0s}
.sp-12__ring:nth-child(2){inset:0;animation-delay:0.5s}
.sp-12__ring:nth-child(3){inset:0;animation-delay:1s}
.sp-12__ring:nth-child(4){inset:0;animation-delay:1.5s}
.sp-12__dot{
  position:absolute;
  inset:30px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 12px var(--c),0 0 24px rgba(41,182,246,0.4);
}
@keyframes sp-12-ripple{
  0%{transform:scale(0.1);opacity:1}
  100%{transform:scale(1.8);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-12__ring{animation:none;opacity:0.3;transform:scale(1)}
}

How this works

Four rings are stacked absolutely at inset:0 (matching the wrapper size) with only a border for visual weight. The sp-12-ripple keyframe drives each ring from scale(0.1) to scale(1.8) while simultaneously fading opacity from 1 to 0, creating the illusion that each ring expands outward from the centre dot.

Starting at scale(0.1) rather than 0 avoids the sharp pop at the centre. The four rings are offset by 0.5s each (0s, 0.5s, 1s, 1.5s) so at any point in the 2s cycle there is always a ring expanding at each quartile, maintaining a continuous ripple appearance.

Customize

Edit --c to change both the dot and ring colour simultaneously.
Increase ring count to 6 by adding two more .sp-12__ring elements and extending delays to 2.0s and 2.5s (with a matching animation-duration:3s).
Change scale(1.8) to scale(2.5) for larger ripple spread — useful when the spinner is placed over larger UI areas.
Replace the border ring with a filled circle using background:var(--c) and reducing opacity start to 0.3 for a filled-disc ripple like a sonar ping.
Add animation-timing-function:cubic-bezier(0.2,0.6,0.4,1) for a slow-start fast-expand ripple that mimics water more accurately.

Watch out for

The outer scale reaches 1.8× the wrapper size — ensure the parent container has overflow:hidden if you need to contain the rings within a specific bounding box.
Four simultaneous transform:scale + opacity animations can create four separate compositor layers — profile on mobile if embedding multiple ripple spinners on a single page.
At very fast durations (under 0.8s), the four rings may visually merge and lose the distinct ripple rhythm — keep at 1.5s minimum for clarity.

Browser support

Chrome	Safari	Firefox	Edge
60+	12+	60+	60+

Compositor-friendly transform/opacity only; broad browser support.

More from 25 CSS Spinners

Wave Bar Equalizer Spinner Stacked Ring Helix Spinner Morph Square-to-Circle Spinner Comet Trail CSS Spinner DNA Double Helix Spinner Folding Cube Grid Spinner Clock Tick Sweep Spinner Infinity Loop Stroke Spinner Bouncing Elastic Dots Spinner Spiral Galaxy CSS Spinner Glassmorphism Loader Spinner Cyberpunk Segmented Ring Spinner

View the full collection →