‍

A great way to level up any application your building is to create a simple loading animation. Today, we're going to make use of free resources and pure CSS to create a loading animation of our own.

Of course, this is not integrated with anything. Integrating the spinner with actual loading time in the app is a whole other tutorial, but for now, we're going to worry about creating the actual spinner!

‍

For this spinner I got this simple spinner of Pixabay (thanks gorkhs).

We start with just a very simple structure in our HTML.

Tip: Make sure you include the correct path and name to your image.

To create the animation, we will use keyframes and the transform property. Below, we'll create a keyframe animation called spin:

Now, let's style our actual spinner!

We created a div that contains the image in our HTML file, and assigned it the class of spinner. We will give it the following properties:

Now, for the actual image:

Now we have a working spinner!

Want to see the full tutorial? Watch the video below or watch in on CodeCast to get access to all the code in the Player!