Easily create your own CSS loading spinner

There is an abundance of loading spinners out there for you to download or use, but how easy are they to implement, or even write yourself? This one is really easy, although you can build on it to make it more flashy.

This one has a two-tone colour, which spins one way, before slowing down and spinning the other, then repeat. See, nice and easy. All created with only HTML and CSS.

The loading spinner

First, you’ll need to actually create the spinner, which is easily done with the following code.

The wrapper is so that we can position it to fill the screen, and possibly put a tint over whatever is loading. Also, it makes it easier to centre align the spinner.

Setting the wrapper

The spinner that we are going to make is going to be 100px square. So for the wrapper to be centre-aligned, we need it to be off by 50px.

Creating the spinner

Now we can concentrate on the spinner. First, we’ll create the circle.

Now we have the square, with three sides a dark grey colour, and one side white. Adding the border-radius will make this a circle, adding the margin will centre-align the spinner.

Creating the animation

We’ve referenced the animation keyframe in the previous section, so now we need to create the spin keyframe. One animation will spin it right 2 rotations clockwise, before spinning it back in the opposite direction. The call made in the #outer section above sets the speed and tells it to run infinitely.

Demo

Conclusion

And there you have it! A simple spinner from which you can start to create anything. I am hopeful that in the future I can make it change shape and size. What can you come up with?