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.

1 Like
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.