Three small dots bouncing in sequence is one of the most recognizable loading indicators in modern app design — simpler and often more visually pleasant than a spinning circle for indicating a brief wait, like a chat message being typed.
Customize the dot color and animation speed with live controls, watch the bouncing sequence render immediately, then copy the complete HTML and CSS needed to add the same loading indicator to your own project.
Each dot uses the same bounce keyframe animation but with a staggered animation-delay, creating the sequential wave effect — no JavaScript is needed since the whole animation runs purely through CSS keyframes and timing offsets.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
Frequently asked questions
How is the staggered bounce effect achieved without JavaScript?
Each dot shares the same @keyframes bounce animation but with a different animation-delay value, so they start their identical bounce cycle at slightly offset times, creating the wave-like sequential effect.
Can I use more or fewer than three dots?
Yes, add or remove dot elements with appropriately staggered delay values — the same technique scales to any number of dots.