• 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?

Tracy Perry

Well-known member
#7
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

Active member
#8

zagorskey

Active member
#14
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
    }