Create A Loading Spinner with CSS Keyframes

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.

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

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:

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

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:

 .spinner {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
 }

Now, for the actual image:

 .img {
   height: 150px;
   animation: spin 2.5s linear infinite;
 }

Now we have a working spinner!

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!

For more of my content, follow me on like Twitter & CodeCast!

You can also read my last blog here:

Create A Portfolio Website with only HTML & CSS

Amy Oulton ・ Jan 13 '22

#html #css #webdev #codenewbie

.