Support » Plugin: Crelly Slider » How to change loading/progress bar?

  • Resolved Trishah

    (@trishahdee)


    I’d like to use my own loading/progress image. Usually I would do CSS display:none but that doesn’t work as it seems the current image is being loaded with JS.

    Can you explain how I can use my own image?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Fabio Rinaldi

    (@fabiorino)

    I’m sorry, I’ve had some problems keeping up with the support messages and it’s probably too late now, but I’ll post anyway in case someone else is interested:

    the slider loader is a CSS animated element you can target with .crellyslider > .cs-preloader > .cs-loader. Take a look here https://github.com/fabiorino/crelly-slider/blob/master/css/crellyslider.css from line 54, you’ll see the full implementation of the element.

    Trishah

    (@trishahdee)

    Thank you for the reply. It’s actually not too late as I’m still using your slider on a client site 😀

    I already played around with the CSS. The thing I wanted to do was use a completely different loading image and not just tweak the image that is there.

    Would it be possible to use the CSS “content” or “background-image” instead of coding it into the plugin files so we have access to making greater changes to it?

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    The loader is highly customisable as long as you add the right CSS to your theme, either by using the WordPress custom CSS functionality or by adding it directly in the theme’s style.css file.

    First, you need to hide the blue bars:

    .crellyslider > .cs-preloader > .cs-loader > .cs-spinner {
        display: none;
    }

    Then, you can add a background image in the circle:

    .crellyslider > .cs-preloader > .cs-loader {
        background-image: url("my-image.jpg");
        background-size: cover;
    }

    That will add a background image in the circle. You can add other tweaks, just play with the CSS. For example, set

    .crellyslider > .cs-preloader > .cs-loader {
        border-radius: 0;
    }

    to transform the circle into a square.

    Trishah

    (@trishahdee)

    Ahh! I see what I was missing! You’re removing your spinner from its container than adding a background image to that container. Got it. Thank you so much for explaining that. Might want to add this to your documentation so others can easily find this info.

    Thank you for taking the time to explain this.

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    Cool, I’ve added that to the documentation 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.