← All elements
<div aria-label="Loading" role="progressbar" class="container">
<div class="swing">
<div class="swing-l"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="swing-r"></div>
</div>
<div class="shadow">
<div class="shadow-l"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="shadow-r"></div>
</div>
</div>About this animation
Seven balls on a cradle where the outer two swing out in alternation, with a matching shadow underneath.
How it works
Seven balls float inside a container, with gradients that run from blue to red across the row. The first and last balls have swing keyframes that lift them out and back, offset by half a cycle, and two shadow elements underneath mirror the motion so the swing feels weighty.
Ways to customise it
- Change the gradient stops of each ball.
- Edit the em size of the balls.
- Lengthen the swing duration.
Good to know
The container has role progressbar and an aria-label of Loading, which is a good start. Add aria-busy to the area that is loading.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.