XF 1.4 Replacing AjaxProgressIndicator gif with FontAwesome

[mistypants]

I'm attempting to replace the loading gif with a FontAwesome icon, similar to the spinners shown here: http://fontawesome.io/examples/#spinning

I've successfully replaced the gif with the FontAwesome icon using the following CSS:

#AjaxProgress.xenOverlay .content:before {
        content: '\f013';
        font-family: FontAwesome !important;
        font-style: normal;
        text-align: center;
        color: #fff; }

However, I'm having some trouble getting the icon to animate. I'm fairly certain you can animate pseudo classes, but this is my first time working with CSS animations besides simple fade ins/outs, so I suspect my animation code is incorrect. Here's what I have:

/* Ajax Progress Indicator */
    #AjaxProgress.xenOverlay .content:before {
        content: '\f013';
        font-family: FontAwesome !important;
        font-style: normal;
        text-align: center;
        color: #fff;
        -webkit-animation: spin 2s infinite linear;
        -moz-animation: spin 2s infinite linear;
        -o-animation: spin 2s infinite linear;
        animation:spin 2s infinite linear; }       
    @-moz-keyframes spin {
        0% { -moz-transform: rotate(0deg) }
        100% { -moz-transform: rotate(359deg) }
    }
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg) }
        100% { -webkit-transform: rotate(359deg) }
    }
    @-o-keyframes spin {
        0% { -o-transform: rotate(0deg) }
        100% { -o-transform: rotate(359deg) }
    }
    @-ms-keyframes spin {
        0%{ -ms-transform: rotate(0deg) }
        100% { -ms-transform: rotate(359deg) }
    }
    @keyframes spin {
        0% { transform:rotate(0deg) }
        100% { transform:rotate(359deg) }
    }

Would post a link to my board but it's my private test board. Any help is appreciated!

 

[Andy.N]

This is an interesting idea for UIX @Mike Creuzer

 

[jOOc]

I tested on my UI.X and its spinning just fine.
Maybe you have any other CSS modifications interfering

 

[mistypants]

I tested on my UI.X and its spinning just fine.
Maybe you have any other CSS modifications interfering

I've just tested it on a vanilla style (only modification is to add FontAwesome) and the animation still wasn't working. I'll try disabling add-ons but I don't run many on my test board in the first place.

Edit: Yup, disabled all add-ons and still no spin.

 

[mistypants]

Update! I've figured it out. Apparently CSS animations don't like to work when the display property is set to inline. I've changed it to inline-block and I now have a spinning cog.