How to auto redirect to home page on a loading page?

Ask the community
,
1

Hi All!

Wix Studio

I have a loading page I would like to implement when visitors visit the home page.
It will have a GIF image I have created. and then it will auto redirect to the home page after 5 seconds. No action is required by the user, fully automatic.

I have searched the web for a code, but it does not seem to redirect me.

import wixWindow from 'wix-window';

$w.onReady(() => {
    setTimeout(() => {
        wixWindow.to("/home"); // Provide the relative path to the Home page
    }, 5000);
});

I have tried other ways to implement this auto loading page function:

  • Lightbox with fadeout code (did not work, has to be clicked to close)
  • Loading Strip Overlay (Loads everytime I visit home page)

I have consulted with ChatGPT with some basic coding, but it also failed.

Can anyone please advise a functioning code?

Thanks in Advance!

2

This code should do that. However Iā€™d caution against doing it this way as loading screens are often used to let assets load and this 5 second delay doesnā€™t do that, it delays, then redirects the user to a brand new page that needs to load its assets anyways.

A better approach would be:

  • Have the image take up the full screen
  • Hide the image in the $w.onReady so that the image is hidden the moment the page is fully loaded
3

Thanks!

I have tried your approach, but this image would load every time I revisit the homepage.
I have tried codes that only allow this to ā€˜loadā€™ once per viewing session, but those codes failed.
Are there any more approaches that could allow this loading screen to show only once per session?

Perhaps I need a premium plan for this to work?

4

Is this the way ā†’ you are trying to generate a PRELOADER ???

5

No sorry, I am looking for a more simple and straight forward loading screen.
Mostly achieved via either:

  • Lightbox + FadeOut Code (Failed due to unable to FadeOut automatically and require manual click)
  • Loading Strip + Code (Failed due to ā€˜once per sessionā€™ code not working)
  • Another Loading Page Redirect (Failed due code to not redirecting)

Coding is not my strong side, but Iā€™m amazed how much you can achieve with it.
Thanks

6

The PRELOADER-CODE is laready given in the post i showed.

CODE:

<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script><style>.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: #1476FF;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 3px;
}

.pace .pace-progress-inner {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow: 0 0 10px #1476FF, 0 0 5px #1476FF;
	opacity: 1.0;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	-moz-transform: rotate(3deg) translate(0px, -4px);
	-ms-transform: rotate(3deg) translate(0px, -4px);
	-o-transform: rotate(3deg) translate(0px, -4px);
	transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
	display: block;
	position: fixed;
	z-index: 2000;
	top: 15px;
	right: 15px;
	width: 14px;
	height: 14px;
	border: solid 2px transparent;
	border-top-color: #1476FF;
	border-left-color: #1476FF;
	border-radius: 10px;
	-webkit-animation: pace-spinner 400ms linear infinite;
	-moz-animation: pace-spinner 400ms linear infinite;
	-ms-animation: pace-spinner 400ms linear infinite;
	-o-animation: pace-spinner 400ms linear infinite;
	animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes pace-spinner {
	0% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-o-keyframes pace-spinner {
	0% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-ms-keyframes pace-spinner {
	0% {
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes pace-spinner {
	0% {
		transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

</style>

2024-05-08 00_21_52-Window
2024-05-08 00_21_52-Window369Ɨ520 19 KB

2024-05-08 00_22_14-Window
2024-05-08 00_22_14-Window863Ɨ132 5.64 KB

And also like already mentioned ā†’ you can chnge PRELOADER-STYLE/DESIGN easely with the presented version of V. WACKERMEDIA.

This have been said ā†’ if you were looking for a PRELOADER ā†’ then the way you are going now is a ā†’ FAKE-PRELOADER ā† like my old one you will find inside the post.

7

Thanks,

I understand the code works, but I would prefer a custom loading logo which I have designed and exported as a gif.

8

Yes you could augment the various approaches using local storage to store a variable that indicates whether or not the preloading animation has been shown before and decide to show/hide it based on that. This has some limitations in that the site basically needs to be fully loaded before the ā€œpreloaderā€ animates but it could achieve the effect you want.

9

This could answer your question, on how to work with sessionsā€¦ and the storageā€¦
A little bit another functionality shown in the following post, but you could learn from itā€¦

ā€¦related to ANTHONYā€™s duggestion.