← All elements
<div class="loader-container">
<div class="traffic-light">
<div class="light-row">
<div class="light red-light"></div>
</div>
<div class="light-row">
<div class="light yellow-light"></div>
</div>
<div class="light-row">
<div class="light green-light"></div>
</div>
</div>
<div class="loading-status"></div>
</div>About this animation
A glossy traffic light whose red, amber and green lamps switch on in sequence while a status line underneath changes to match.
How it works
Three lamp elements sit in a dark rounded body with layered box-shadows for depth. Each lamp has its own keyframe sequence that brightens it and adds a glow in turn, and two more keyframes change the status text underneath so the words follow the light.
Ways to customise it
- Edit the lamp colours in the three sequences.
- Change the animation duration to slow the cycle.
- Replace the status words with your own steps.
Good to know
Moving lights should not be the only signal of a state, which is why the text changes too. Add a reduced-motion rule if you use it on a busy page.
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.