DEV Community

Cover image for Pure CSS Spinner
Amy Oulton
Amy Oulton

Posted on • Updated on

Pure CSS Spinner

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

Spinner Gif

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

Rainbow Spinner

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

<div class="spinner">
  <img src="./rainbow.png" class="img"/>
</div>
Enter fullscreen mode Exit fullscreen mode

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);
   }
 }
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)