Instant CSS
Tools
Templates
Components
Learn
More
Bouncing Dots
Animation
Three bouncing dots, classic typing/loading indicator.
Reset to Default
HTML
Copy HTML
<div class="dots"> <span></span> <span></span> <span></span> </div>
CSS
Copy CSS
.dots { display: inline-flex; gap: 6px; } .dots span { width: 12px; height: 12px; background: #4f46e5; border-radius: 50%; animation: dotBounce 1.2s infinite ease-in-out both; } .dots span:nth-child(1) { animation-delay: -0.32s; } .dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes dotBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.