Pure CSS Spinner

I use a simple stock image and some vanilla CSS to create a simple spinner.

GIF

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

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

<div class="spinner">
  <img src="./rainbow.png" class="img"/>
</div>

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

After some general styling, we do the spinner action using CSS keyframes. For the speed I chose, I went with this:

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

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

Be sure to follow me on CodeCast for more of my tutorials!