1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Replacing AjaxProgressIndicator gif with FontAwesome

Discussion in 'Styling and Customization Questions' started by mistypants, Dec 30, 2014.

  1. mistypants

    mistypants Well-Known Member

    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:
    Code:
    #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:
    Code:
    /* 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!
     
  2. Andy.N

    Andy.N Well-Known Member

  3. jOOc

    jOOc Active Member

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

    mistypants Well-Known Member

    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.
     
    Last edited: Jan 3, 2015
  5. mistypants

    mistypants Well-Known Member

    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.
     
    jOOc and Amaury like this.

Share This Page