Page load indicator (Really real Preloader)

[valentin_wackermedia]

So I know this topic is an ongoing conversation and yes, there mostly isn’t a plausible reason on why you need a page loading indicator (or preloader) on your Wix Site, since it’s speed is optimized already. But sometimes it can look cool I guess

I’ve tested multiple Ideas on preloaders, etc. from this Forum, but none of them really worked as intended, or slowed down the page.

This code should fix that problem once and for all:

1. Copy the Code
2. Go to your Dashboard > Settings > Custom Code
3. Paste the the code in the header, name it and set it to reload on every page

<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>

.
.
.
If you want to change the Theme etc. you can download the CSS here or adjust as needed:
https://codebyzach.github.io/pace/

[CODE-NINJA]

I tested your real-time-preloader → but due to the fact that it is fired by NPM-Lib, it is not indicating that accurate.

I compared it to my own generated one, which you will be able to see on the very top on the following site…

https://www.media-junkie.com/

This PRELOADER works very precise and loads almost in 9 of 10 loading-processes very exactly, giving you even the percentage). But even this one is still not a 100% REAL-TIME-PRELOADER out of my view.

The version you use (PACE) ends the loading process displaying, before or after the page has been loaded completely and i think it looses 500ms for loading the pace-lib (at least 500ms were mentioned in the DOCS).

So if you really want to have a perfect and very accurate PRELOADER, you code it yourself, without any use of addinional LIBRARIES (which will comsume even more loading time).

But for ordinary preloader, this is a very nice and simple PRELOADER-SOLUTION → THUMBS-UP

Oh, and do not care about this one…

…on the right side → it is just a loading gif, which i forgot to remove.
This was my old pseudo-preloader working on the page directly.

For better visual comparisson, i activated both versions. Now you are able to see both PRELOADERS in action…

Do the PRELOADER-TESTINGS about 10x and you will see the difference.

[Sat_T]

It works like a charm. Thank you so much.