A loading animation which allows the user to see how much longer they have to wait before progressing to the next stage.
Last week I was tasked with creating a loading animation created entirely in
CSS but unfortunately my first attempt didn’t quite go to plan and I ended up leaving it incomplete. However, not to be beaten I decided to go back and rework my code.
CSS loading animations are nothing new, I remember seeing my first one back in 2010, but it doesn’t hurt to test yourself by creating these sorts of things.
Here’s a quick rundown:
- Set up your containing
spans within as child elements.
- Target each
nth-of-typeto rotate, translate and animate.
- Define and apply
keyframes to animate the
If you’re interested in seeing the final result then feel free to check out my demo but please make sure you are using a modern browser.