Docs

[Eric]

Hi I have a client that wants to use their logo as the spinner icon while slide loads. It seems this question was asked a couple years ago and the answer was to replace one of the spinner gifs in plugins/revslider/assets directory. Is this still the same process? I’m not seeing any gifs in the assets directory.

Thanks!

[Nico]

Hi There,

Thanks for writing in.

We would love to help you however the process of changing the spinner now is quite technical and it is beyond the scope of our support.

Upon checking further, the spinner used or created using CSS only.

Sample:
To change the spinner icon,
Using the second spinner, the class is

#rev_slider_1_1_wrapper .tp-loader.spinner2{
//change it to image or another color
background: url(https://community.theme.co/app/themes/x-member-area/images/badges/time/2.png);
}

Then to change the animation of the spinner,

.tp-loader.spinner2{
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    background-color: #ff0000;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    border-radius: 100%;
    -webkit-animation: tp-scaleout 1.0s infinite ease-in-out;
    animation: tp-scaleout 1.0s infinite ease-in-out;
}

Hope it helps.

Thanks for understanding.

[Eric]

Thanks!

[Eric]

Thanks for responding Nico. The client wants to use their logo. Would this be possible?

[Rahul]

Hey There,

You can upload a logo as a Media and can insert that URL to the above code.

Hope this helps!

[Eric]

There you go. Thanks!

[Nico]

Let us know how it goes.

Feel free to ask us again.

Thanks.

[Eric]

Hi there. I added the custom css as advised and I’m not seeing any change.

1. Added custom CSS
2. Uploaded a logo to use for the spinner
3. Modified the URL in the CSS to use logo.
4. Changed Spinner type to “2” in Rev Slider.

No changes. What else can I do?

[Nico]

Hi There,

It should have worked.

Would you mind sharing us your admin credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[Eric]

This reply has been marked as private.

[Paul R]

Hi,

I went ahead and change it by adding this in your custom css.

.home .tp-loader.spinner0 {
     background-image:url(http://1cp3531zhs0530wg6fr6xb61.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/1.png) !important;
}

Kindly check on your end.

Thanks

[Eric]

It worked!

Thanks!

[Eric]

The original .gif had a white background, so I uploaded an image with a transparent background. Its a little larger, but now its a square. How can I fix this so its round like the logo?

Thank you so much for you help on this!

[Christian]

I added border-radius: 100em to your CSS so overall code is

.home .tp-loader.spinner0 {
     background-image:url(http://1cp3531zhs0530wg6fr6xb61.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/1.png) !important;
border-radius: 100em
}

Hope that helps. 🙂

[Eric]

Hi – can we revisit this? The spinner logo is cut off. I adjusted the border-radius from 100em to 150em and its still cut off. Please advise. Site: http://www.link360inc.com/

Thanks!

[Author]

Posts