Super simple and cool FontAwesome spinner trick (jQuery)

By Haktan Suren
In Blog
Jul 6th, 2014
2 Comments
14447 Views

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!

About the Author

Haktan Suren
- Webguru, Programmer, Web developer, Graduate student & Father :)

2 Responses to “Super simple and cool FontAwesome spinner trick (jQuery)”

  1. vaibhav says:

    why spinning cog icon is not spinning on axis ? its wobble and accrues elliptical shape on spinning.

    • Haktan Suren Haktan Suren says:

      To be honest, I have not noticed it till you pointed out lol.

      I have two arguments about it.

      #1 fa-cog is not perfect square as icon (26×30), this might be causing it to wobble.
      #2 maybe just an optical illusion? (you are welcome not to take this seriously)

Wrap your code in <code class="{language}"></code> tags to embed!

Leave a Reply

E-mail address is required for commenting. However, it won't be visible to other users.

Loading Facebook Comments ...
Loading Disqus Comments ...