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

XF 1.3 How to change this loading gif?

Discussion in 'Styling and Customization Questions' started by Barbossa, Jul 22, 2014.

  1. Barbossa

    Barbossa Active Member

    I have tried to locate this gif, can you please tell me how to change it? I want to put my one there.
    Untitled.png
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    Pretty sure that is not a GIF as it can be modified via CSS for color changes (if I remember correctly).
     
    Barbossa likes this.
  3. Barbossa

    Barbossa Active Member

    Ah!! Here I was think it as a gif!! How do I put a gif there then?
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    To be honest... I've never had it display long enough to get to view it in Chrome Developer mode. @Brogan may know.
     
  5. Hoffi

    Hoffi Well-Known Member

    Barbossa likes this.
  6. Barbossa

    Barbossa Active Member

    Same here. Thanks mate. :)
     
  7. Tracy Perry

    Tracy Perry Well-Known Member

    Template that it is defined in is xenforo_overlay.css.
    Also can be done via style properties in the Overlays & ToolTips Ajax Progress Indicator.

    I feel some fontawesome goodness coming on for that.
     
    Barbossa likes this.
  8. Barbossa

    Barbossa Active Member

    Tefka likes this.
  9. Hoffi

    Hoffi Well-Known Member

    Barbossa likes this.
  10. Hoffi

    Hoffi Well-Known Member

    by the way: in the directory are three loader images for different backgroundcolors.
     
    Barbossa likes this.
  11. Barbossa

    Barbossa Active Member

    Now that is awesome. :)
     
  12. zagorskey

    zagorskey Active Member

    This is even better as you can build the same animation with css only:
    http://cssload.net/
     
  13. Barbossa

    Barbossa Active Member

    Liked it, now how to put it? :)
     
  14. zagorskey

    zagorskey Active Member

    You need to edit the xenforo_overlay.css

    Look for the line:
    Code:
    #AjaxProgress.xenOverlay .content
    Keep the semi-transparent background but remove the picture and use the css animation in a :before or :after element.

    I.e. here is how I have achieved it in our community:

    Code:
    @-webkit-keyframes loading{
      0%{-webkit-transform:translate(-4px,0)}
    25%{-webkit-transform:translate(4px,4px)}
    50%{-webkit-transform:translate(4px,-4px)}
    75%{-webkit-transform:translate(-4px,-4px)}
    100%{-webkit-transform:translate(-4px,4px)}
    }
    @-webkit-keyframes loading{
      0%{box-shadow:4px -4px #fff,-4px 4px #d8243c}
    25%{box-shadow:4px 4px #fff,-4px -4px #d8243c}
    50%{box-shadow:-4px 4px #fff,4px -4px #d8243c}
    75%{box-shadow:-4px -4px #fff,4px 4px #d8243c}
    100%{box-shadow:4px -4px #fff,-4px 4px #d8243c}
    }
    @keyframes loading{
      0%{transform:translate(-4px,0)}
    25%{transform:translate(4px,4px)}
    50%{transform:translate(4px,-4px)}
    75%{transform:translate(-4px,-4px)}
    100%{transform:translate(-4px,4px)}
    }
    @keyframes loading{
      0%{box-shadow:4px -4px #fff,-4px 4px #d8243c}
    25%{box-shadow:4px 4px #fff,-4px -4px #d8243c}
    50%{box-shadow:-4px 4px #fff,4px -4px #d8243c}
    75%{box-shadow:-4px -4px #fff,4px 4px #d8243c}
    100%{box-shadow:4px -4px #fff,-4px 4px #d8243c}
    }
    
        #AjaxProgress.xenOverlay .content
        {
            position: relative;
            float: right;
            width: 85px;
            height: 30px;
            border-radius: 0 0 0 10px;
            background: rgba(0,0,0,.5)
        }
    
        #AjaxProgress.xenOverlay .content:before
        {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            width: 0;
            height: 0;
            margin: -5px auto 0;
            background: #50c54c;
            border: 5px solid #50c54c;
            box-shadow: 10px 0 #fff;
            -webkit-animation:loading .5s ease-in-out infinite;
            animation:loading .5s ease-in-out infinite
        }   
     
    Barbossa likes this.
  15. rafass

    rafass Well-Known Member

Share This Page