Speedy CSS Tip! Animated Loader

Speedy CSS Tip: Animated Loader

Let's build an animated CSS loader using scoped custom properties and animation-timing-function. Head over to CodePen and start a new pen.

First, create the markup for the loader, making use of inline custom properties:

If you prefer, a generator like Pug can configure the number of lines:

Next, give the loader some styles:

Position the lines using absolute positioning with a combination of calc and transform:

Apply opacity based on the --index:

Get things spinning:

Notice how steps(var(--count)) delivers the right effect ✨

Done! 🎉 Prefer this in tweet form? 🐦 Stay Awesome! ʕ •ᴥ•ʔ