XF 1.3 How to change this loading gif?

[Barbossa]

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

 

[TPerry]

I have tried to locate this gif, can you please tell me how to change it? I want to put my one there.
View attachment 78400

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

 

[Barbossa]

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

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

 

[TPerry]

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

 

[Hoffi]

Shure, it's an image.

http://xenforo.com/community/styles/default/xenforo/widgets/ajaxload.info_FFFFFF_facebook.gif

It's the div#AjaxProgress nearly at the end.

 

[Barbossa]

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

Same here. Thanks mate.

 

[TPerry]

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]

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

Thanks again. Looking to it.

Shure, it's an image.

http://xenforo.com/community/styles/default/xenforo/widgets/ajaxload.info_FFFFFF_facebook.gif

It's the div#AjaxProgress nearly at the end.

Only 723 bytes!! Better to keep it. Wont be able to find any gif that small.

 

[Hoffi]

But nearly the same you can build uo here:
http://ajaxload.info/

 

[Hoffi]

by the way: in the directory are three loader images for different backgroundcolors.

 

[Barbossa]

But nearly the same you can build uo here:
http://ajaxload.info/

Now that is awesome.

 

[zagorskey]

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

 

[Barbossa]

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

Liked it, now how to put it?

 

[zagorskey]

You need to edit the xenforo_overlay.css

Look for the line:

#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:

@-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
    }

 

[rafass]

https://xenforo.com/community/resources/nprogress.2325/
https://xenforo.com/community/resources/jquery-pace-integration-youtube-like-loading-bar.4224/