Bouncing loading dots

Three dots that bounce in sequence — a tiny, dependency-free loading indicator.

loader
loading
dots
animation

Color#6b46ff

Dot size12px

Speed1.4s

HTML

<div class="dots"><span></span><span></span><span></span></div>

CSS

:root {
    --color: #6b46ff;
    --size: 12px;
    --speed: 1.4s;
}

.dots {
    display: flex;
    gap: calc(var(--size) * 0.6);
}
.dots span {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--color);
    animation: dot var(--speed) ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot {
    0%, 60%, 100% { transform: translateY(0);     opacity: 0.4; }
    30%           { transform: translateY(-10px); opacity: 1;   }
}

How it works

Three <span> dots share one @keyframes that lifts and brightens each dot, then drops it back. The illusion of a wave comes from staggered animation-delay on the 2nd and 3rd dots (0.2s and 0.4s), so they peak one after another.

Great as a “typing…” indicator in chat UIs or a lightweight inline loader. It’s pure CSS — theme it with --color and size everything from --size.