Super simple and cool FontAwesome spinner trick (jQuery)

I have recently used following jQuery and FontAwesome trick to have some cool spinner. The main intention of this article to give you some sort of inspiration to go crazy with FontAwesome and jQuery.

Basically, I needed a cool spinner for a smooth transition from unfollow to follow state or vice versa for my new Twitter app. And I came up with the following code. Here is a step by step implementation.

Step 1: Pick Icons from FontAwesome

Pick icons based on your need from FontAwesome. I picked fa-minus-circle (unfollow) and fa-check-circle (follow) and fa-cog (spinner) .

Step 2: Some CSS Touch Up

First make the pointer appear when hover the icon and then adjust the size.

.fa {
    cursor: pointer;
    font-size: 50px;
}

Make the follow icon green and unfollow icon red .

.fa-check-circle {
    color: green
}
.fa-minus-circle {
    color: red
}

Step 3: Change the icon state when hover.

Of course we use jQuery for this. In my case I want green check circle show up when mouse over and red minus circle when mouse out. Easy to implement as follows.

$(".fa").mouseover(function (e) {
        $(this).removeClass('fa-minus-circle')
        $(this).addClass('fa-check-circle')
}).mouseout(function (e) {
        $(this).addClass('fa-minus-circle')
        $(this).removeClass('fa-check-circle')
})

Step 4: Add the spinner

Again FontAwesome is coming for help. We will use their spinning library
And the usage is as simply as this

<i class="fa fa-spin fa-cog"></i>

And of course we want this show when the icon is clicked. So we need a little bit jQuery help right there …

$(".fa").click(function () {
    $(this).removeClass()
    $(this).addClass('fa fa-cog fa-spin')
    setTimeout(function() { $('.fa').removeClass().addClass('fa fa-minus-circle') }, 1000);
})

We have almost done but, we one thing…

Step 5: Prevent the icons show up when spinner in action

We need to prevent our original icons show up when there is spinner. Otherwise you will likely get either of these. LOL!

So we are fixing the very first javascript code

$(".fa").mouseover(function (e) {
    if ( !$(this).hasClass('fa-spin') ){
        $(this).removeClass('fa-minus-circle')
        $(this).addClass('fa-check-circle')
    }
}).mouseout(function (e) {
    if ( !$(this).hasClass('fa-spin') ){
        $(this).addClass('fa-minus-circle')
        $(this).removeClass('fa-check-circle')
    }
})

Source Code & JSFiddle

Here is the complete source code and example for you. Let me know if you have any question. Do not forget to comment!

CSS

.fa {
    cursor: pointer;
    font-size: 50px;
}
.fa-check-circle {
    color: green
}
.fa-minus-circle {
    color: red
}

Javascript

$(".fa").mouseover(function (e) {
    if (!$(this).hasClass('fa-spin')) {
        $(this).removeClass('fa-minus-circle')
        $(this).addClass('fa-check-circle')
    }
}).mouseout(function (e) {
    if (!$(this).hasClass('fa-spin')) {
        $(this).addClass('fa-minus-circle')
        $(this).removeClass('fa-check-circle')
    }
}).click(function () {
    $(this).removeClass()
    $(this).addClass('fa fa-cog fa-spin')
    setTimeout(function () {
        $('.fa').removeClass().addClass('fa fa-minus-circle')
    }, 1000);
});

HTML

<i class="fa fa-minus-circle"></i>

See the full code in action here JSFiddle

Have Fun Coding!