replace the white overlay of loader with animated white gradient

  • Murat
    Participant
    # 10 months ago

    i came across a usablity issue when growing my site using a mobile device,
    whereas when I apply product filters, I could see a static white overlay – but cannot see the loader icon as it is way down the virtual center of the shop div element off screen
    the user may think that the site is stuck, as he has to wait few seconds while the WPSOLR fetches and applies and filtered results…
    i though that by giving a better visual clue to the site visitor, by replacing the loader gif with a wavy animated css gradient – this brings more life and visual cue to the visitor
    how can we achieve that – is there any css shortcut?

    wpsolr
    Keymaster
    # 10 months ago

    WPSOLR is using the jQuery plugin https://gasparesganga.com/labs/jquery-loading-overlay/
    Let me know if you have ideas.

    Murat
    Participant
    # 10 months ago

    i tried overriding the css style for the div.overlayloader – but it did not work, as it was always -by-design of that juqery plugin having its css defined as inline.
    to make it easy I edited the main js file as follows

    var _defaults = {
    color : “rgba(255, 255, 255, 0.8)”,
    custom : “”,
    fade : true,
    fontawesome : “”,
    image : “…..”
    imagePosition : “top left”, // <<<<<<<<<<<<<<
    maxSize : “100px”,
    minSize : “20px”,
    resizeInterval : 50,
    size : “50%”,
    zIndex : 9999
    };
    ==============
    Alternatively, I have commented out the no-repeat property::

    if (settings.image) overlay.css({
    “background-image” : “url(” + settings.image + “)”,
    “background-position” : settings.imagePosition,
    // “background-repeat” : “no-repeat”
    });

    mcl7
    Participant
    # 10 months ago

    I am having a problem with this is as well. It would be ideal to center the loading icon on the screen instead of what appears to be it being centered in the results.

    wpsolr
    Keymaster
    # 10 months ago

    Currently, the loader is centered on the results section.

    I could add a “loader” jQuery selector setting in the “Theme”, so you can apply the loader to the section you prefer (you can simulate this feature by changing the jQuery results selector)

    Would it work for both of you?

    mcl7
    Participant
    # 10 months ago

    That would be great!

    wpsolr
    Keymaster
    # 10 months ago

    Here is a pre-release of this feature (overlay jQuery selector on the “Theme” add-on): https://trello.com/c/3h4Q8swl/122-add-a-jquery-selector-for-the-ajax-overlay-on-the-theme-add-on

    wpsolr
    Keymaster
    # 2 months, 1 week ago
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.