Loaders
Ping / Ripple Effect
An expanding ring that fades out — for notifications and live status.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.ping-ring {
transform: translate3d(208px, 128px, 0);
width: 64px;
height: 64px;
background: #22d3ee;
border-radius: 999px;
animation: ping-ring-anim 1000ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes ping-ring-anim {
0% {
transform: translate3d(208px, 128px, 0);
opacity: 0.9;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(208px, 128px, 0) scale(1.9, 1.9);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ping-ring {
animation: none;
transition: none;
}
}Why it is built this way
Scale and opacity move together so the ring appears to dissolve as it expands. Because both are compositor properties, you can run several of these at once without the page stuttering.
What it animates
3 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformtransformWhat it costs to run
Opacity, scale x and scale y are handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 1.00s across 6 keyframe stops, with every property moving over the same window.
One curve throughout: Ease Out on a plain box. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — opacity, scale x and scale y move over 1.00s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.