Preload window - Spinning wheel

Ask the community
, ,
1

Question:

Hello everyone,

Is there a solution to have a window (or just a picture) that uses a GIF (for example of a spinning wheel) when the user moves from one page to another.
This would allow him to know that “his click” has been validated, and to avoid him pressing the button several times.
A preloading window for the next page waiting to open somehow?

Thanks a lot for your answers.

Product:
Wix Editor

2

To achieve a preloading effect with a spinning GIF or similar visual feedback when navigating between pages, you can use a combination of CSS and JavaScript to create a loading spinner that appears when a user clicks on a button or link and disappears when the new page loads.

3

Just add this script code to wix site dashboard. You can change the spinning wheel background and other stuff to modify this code. Make sure add the code into the head and select for all the pages
Here is the guide how you can:

This is how it’s working to my site:

image
image1053×318 9.02 KB

/* Preloader Styles */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #91934E; /* Background color */ display: flex; justify-content: center; align-items: center; z-index: 9999; } /* Spinner Animation */ .spinner { border: 12px solid #f3f3f3; border-top: 12px solid #000000; /* Spinner border color */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear infinite; } /* Spinner Keyframes */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
4

wix page transitions are dynamic and such codes only work when the browser is loading, that is, only when the page is refreshed. In summary, this code does not show the loading animation when the user clicks on the site.

5

Thanks everybody for your answers. i will look a that and try it.
I will come back to tell you.

Have a nice day.

6

Hello everybody,

I found a “solution” with a gif that appears when clicking on a button or other, but is there a way that the GIF (a spinning wheel) appears near of the cursor of the mouse when I click (by using the coordinates of the cursor)? ==> (Moving the GIF everywhere on the page)

I use this code to retrieve the values of the coordinates of the mouse (And it works perfectly), but how to assign them to my GIF element? (called SpinningWheel)

$w(‘#Catalogue’).onMouseIn((event) => {

let clientX = event.clientX;
let clientY = event.clientY;
let offsetX = event.offsetX;
let offsetY = event.offsetY;
let pageX = event.pageX;
let pageY = event.pageY;
let screenX = event.screenX;
let screenY = event.screenY;

})

Thank you…