CSS animation for the loader

Empty state loader for Vue.js app

I’d like to share a nice, little trick that helped me a lot while developing an application with Vue.js for MotorK. Well, it works with any JavaScript application that gets hydrated by the client, regardless of the framework of choice (if any).

Most of the time (always?) you begin with this:

All you have is an empty container, acting as the mounting point for your app.
A few data fetch later and life flows into your app: cool, but we’ve gone a bit too far.
Let’s step back a little and consider those few moments in which the browser requested your page, the server responded and the user is staring at a blank, uncommunicative page.
A de facto standard pattern in UX is to provide a state signifier in the form of a loader.

Loading gif

Nice, but… a bit too old school. Since nowadays we can exploit CSS3 at its full potential, let’s reach out for this tool.

By combining CSS animations and a pseudo-selector (:empty), it’s possible to create a lightweight, clean and portable loader indicator.
First of all, let’s put in place the keyframes.

And now the selector to which the animation applies:

In the gist above, @include center-object(all) is just a mixin useful to center an element on an axis (or both, as in this case) and ease(in-out-circ)is a utility function reading a SASS map with common easing functions and returning the corresponding one.

For the Vue part, we just need a very basic example:

After putting it all together, the result is this one:

The final pen showing a living example

Easy and clean!

Just a few side notes:

• the :empty pseudo-selector works if and only if the element to which applies is completely empty: no comment nor whitespaces inside, as per spec.
• the Vue.js code in the example serves as a mere concept, it doesn’t follow any best practice nor can it be considered production-ready.
• I used SCSS just because I’m lazy and I grabbed the code directly from my source, but making it in pure CSS is absolutely fine.