replace the white overlay of loader with animated white gradient
-
MuratParticipant2 years, 9 months ago #23172
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?wpsolrKeymaster2 years, 9 months ago #23173WPSOLR is using the jQuery plugin https://gasparesganga.com/labs/jquery-loading-overlay/
Let me know if you have ideas.MuratParticipant2 years, 9 months ago #23175i 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 followsvar _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”
});wpsolrKeymaster2 years, 9 months ago #23179Currently, 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?
wpsolrKeymaster2 years, 9 months ago #23194Here 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
You must be logged in to reply to this topic.