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