Ripple
Expanding concentric ripple circles that fade as they grow outward. Use it for calming radar-like loading effects, location pings, or attention-drawing pulse indicators.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
ripplecircleexpandingwave
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
Expanding concentric ripple circles for a calming, radar-like loading effect.
CSS
css
.ripple {
width: 48px; height: 48px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.ripple span {
position: absolute;
width: 100%; height: 100%;
border: 2px solid #ec4899;
border-radius: 50%;
animation: ripple 1.2s ease-out infinite;
}
.ripple span:nth-child(2) { animation-delay: 0.4s; }
.ripple span:nth-child(3) { animation-delay: 0.8s; }
@keyframes ripple {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="ripple"><span></span><span></span><span></span></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.ripple {
width: 48px; height: 48px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.ripple span {
position: absolute;
width: 100%; height: 100%;
border: 2px solid #ec4899;
border-radius: 50%;
animation: ripple 1.2s ease-out infinite;
}
.ripple span:nth-child(2) { animation-delay: 0.4s; }
.ripple span:nth-child(3) { animation-delay: 0.8s; }
@keyframes ripple {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="ripple"><span></span><span></span><span></span></div>
</body>
</html>