Font-Awesome - icon-spin does not spin when hidden and then displayed

Question

When my page loads, I hide the icon-refresh + icon-spin icon by setting its display property to none.

Now, after some action is performed, I wish to display this icon. I invoke jQuery's .show() method on the icon. However, while the icon is shown, the icon is not spinning anymore.

If I load it without hiding it initially, it spins. But not when it is hidden and displayed later.

EDIT: If it was not clear from the title, I am using Font Awesome to display the icons

Wallah

This seems to work for me: jsfiddle.net/RXkwq (JSFiddle WebFont issues not withstanding) – Marcmarcano

I've got the same problem. Only occurs in Firefox 35. The answer below didn't solve it for me – Septivalent

Answer 1

You have to use $element.css("display","inline-block"); instead of .show();

Kagu

This fixes it in Safari and Firefox for me. It was previously working in Chrome. I've not tested anything else yet… – Ophidian

in case anyone wondering .show() sets display:inline which does not support css transform. see #14883750 – Denier

Answer 2

Old topic, but I had similar issue with "fa-spin" not working after the containing element was hidden with { visibility: hidden }, set with jQuery. There was also some other animation involve, which was probably causing timing issues, etc.

The fix was to set an event on the containing element to fire on making it visible again, which fired this function:

ply_obj.container.on(
            'controlsshown',
            function () {

                if (ply_obj.config.loop_tf) {
                    ply_obj.loop_icon.removeClass('fa-spin');
                    setTimeout(function () { ply_obj.loop_icon.addClass('fa-spin'); }, 100);
                }
            }
        );

So removing the "fa-spin", then adding it back with a small delay made it work as desired for me.

Counterpoise

Answer 3

Are you calling "$('#mySpinnerElement').hide()?

I changed that to document.getElementById('mySpinnerElement').style.display = 'none';

and my spinner spins on subsequent calls

HTH

Swampy

Organzine

Answer 4

Seems that IE10 does not run the spin animation if the initial display state is none. I found that dynamically changing the display to inline-block did not trigger the spin animation. Moving the spinner off-screen solved the problem. E.g:

.icon-spinner {
    position: absolute;
    left: -9999px;
}
.is-pending .icon-spinner {
    left: 0;
}

Dentation

Answer 5

Put your icon in div or span tag and hide and show that tag not the icon.

HTML Code:

 <span class="ig-icon-loading"><i class="fa fa-spin fa-spinner"></i></span>

jQuery:

$('.ig-icon-loading').show();

CSS:

.ig-icon-loading{
    display: none;
}

Quotha