ripple rings pulse sonar live status circular animation live status indicator on avatar or badge CTA button attention pulse sonar / ping animation around a map marker active user presence indicator single-ring pulse (pulse-border) not dramatic enough need concentric expanding rings without canvas SVG ripple with JS overhead is too heavy
Ripple Rings
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/ripple-rings.json Preview
Background
Customize
Quick Start
<div class="ripple-rings"><span class="ripple-ring"></span><span class="ripple-ring"></span><span class="ripple-ring"></span><span class="relative z-10 h-8 w-8 rounded-full bg-blue-500"></span></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1055 bytes · 36 lines
- Custom Properties
-
--ripple-color--ripple-size--ripple-duration - Classes
-
.ripple-rings.ripple-ring
ripple rings pulse sonar live status circular animation
Three concentric rings expand and fade outward in sequence using nth-child delays calculated from a single --ripple-duration variable. The rings sit absolutely inside a fixed-size container and wrap any content placed after them.
Live status dot
<div class="ripple-rings" style="--ripple-color: oklch(0.65 0.2 145);">
<span class="ripple-ring"></span>
<span class="ripple-ring"></span>
<span class="ripple-ring"></span>
<!-- Content in front of rings -->
<span class="relative z-10 h-8 w-8 rounded-full bg-green-500"></span>
</div>Customize
.ripple-rings {
--ripple-color: oklch(0.7 0.2 25); /* red alert */
--ripple-size: 6rem;
--ripple-duration: 1.8s;
}