Bouncing Dots
Three sequentially bouncing dots that create a friendly, minimal loading indicator. Perfect for chat typing indicators, inline loading states, or lightweight content placeholders.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
dotsbouncingloaderthree-dots
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
Three sequentially bouncing dots for a friendly, minimal loading indicator.
CSS
css
.dots { display: flex; gap: 8px; align-items: center; justify-content: center; }
.dot {
width: 12px; height: 12px;
background: #22c55e;
border-radius: 50%;
animation: bounce 0.8s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.1s; }
.dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce {
0%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-12px); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="dots">
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
</div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.dots { display: flex; gap: 8px; align-items: center; justify-content: center; }
.dot {
width: 12px; height: 12px;
background: #22c55e;
border-radius: 50%;
animation: bounce 0.8s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.1s; }
.dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce {
0%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-12px); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="dots">
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
</div>
</body>
</html>