CSS Spinner Or Loader Using Font Awesome Icon

By Faruque Ahamed Mollick

In this tutorial, we are going to see how to build spinner or loader using very less CSS code with Font Awesome. As we are going to use the Font Awesome icon here, so we don’t have to waste time in creating our CSS figure. Font awesome will help us by saving our precious time.

Let’s first choose the font awesome icons.

How To Draw A Circle In CSS? – CSS Code To Draw A Circle

CSS Code To Change Text Selection Color

We are going to use 3 font awesome icons that can look great and can be used as the loader on the web page for various purposes. Below are the given icons:

  1. fa-spinner
  2. fa-circle-o-notch
  3. fa-refresh

Now let’s start with our CSS code.

At first, we are going to create the animation using CSS keyframes. Below is the given code where we have created keyframe and name it as “spinner”:

@-webkit-keyframes spinner { /* For Safari */
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

The above code will rotate an element from 0 degrees to 360 degrees with animation.

Now below is our CSS class which will be used to rotate our font awesome icons infinitely:

.spin-it {
   -webkit-animation: spinner 1s linear infinite; /* Safari */
   animation: spinner 1s linear infinite;
}

Now we are going to rotate the 3 font awesome icons. The CSS code below can do this:

.fa-spinner {
    font-size: 1.9em;
    color: #077784;
}

.fa-circle-o-notch {
    font-size: 1.9em;
    color: #077784;
}

.fa-refresh {
    font-size: 1.9em;
    color: #077784;
}

After that below is our font awesome icon with the class “spin-it” where we have set the infinite animation:

<i class="fa fa-spinner spin-it" aria-hidden="true"></i>
<i class="fa fa-circle-o-notch spin-it" aria-hidden="true"></i>
<i class="fa fa-refresh spin-it" aria-hidden="true"></i>

You can notice that we have put the class “spin-it” with each of our font awesome icons. You can use this class to rotate any other icons or for an image or even element or a CSS figure.

CSS rotate animation on mouse hover

Add Custom CSS Style In WordPress Admin Dashboard Area

Now let’s test it on your browser and you will see the rotating font awesome icon.

So was it not so amazing? We just have to use some font awesome icons and rotate it using CSS3 keyframes to build our own spinner. I hope you like that.

Leave a Reply

Your email address will not be published. Required fields are marked *