ok, so i just made a code for my website that i made with editor x, and i wanted to display a preloader showing on all pages (instantly when browser refreshing, or, when you interact with a button or with the menu.. of the site)
So for that, the code is working, but i have a problem, when the site has finished loading, all elements like, pictures, menu... are completly blurred: here is a pic from
i think it's coming from the java script line, but not sure at all.
Here is my code :
<body bgcolor=#222222>
</body><center>
<div class="spinner" id="preloader">
</div>
<script type="text/javascript">
(function(){var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame()
{
if(loading == 100){clearInterval(id);
}
else {
loading = loading + 1;
if(loading == 90){preload.style.opacity = "0";
}}}})();
</script>
<style>
.spinner
{
position: absolute;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
width: 40px;
height: 40px;
background-color: #888888;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane { 0%
{
-webkit-transform: perspective(120px) } 50%
{
-webkit-transform: perspective(120px)
rotateY(180deg) } 100%
{
-webkit-transform: perspective(120px)
rotateY(180deg)
rotateX(180deg) }
}
@keyframes sk-rotateplane { 0%
{
transform: perspective(120px)
rotateX(0deg)
rotateY(0deg);
-webkit-transform: perspective(120px)
rotateX(0deg)
rotateY(0deg) } 50%
{
transform: perspective(120px)
rotateX(-180.1deg)
rotateY(0deg);
-webkit-transform: perspective(120px)
rotateX(-180.1deg)
rotateY(0deg) } 100%
{
transform: perspective(120px)
rotateX(-180deg)
rotateY(-179.9deg);
-webkit-transform: perspective(120px)
rotateX(-180deg)
rotateY(-179.9deg);
}
}
/style>
sorry for the long read...
anyway...
best,
Alexandre
If you use html on your page or in Tracking and Analytics, then no as you need a premium site for it. You would need to use javascript on your page instead.
Wix did have an old preloader example that did just that, however it seems to have been taken down and I can't find it elsewhere.
https://www.wix.com/corvid/example/Preloader
(Just goes to the 404 not found page)
The sample is just showing an effect, putting a pre-loader in the onReady function doesn't show it until all elements are loaded. You want to add a pre-loader when page starts to load and then hide it when the page is loaded.
There is this old forum post about it which gives the full code for it.
https://www.wix.com/corvid/forum/community-discussion/preloader-with-lightbox-not-working
You can see other peoples take on that original tutorial here.
How To Create A Custom Preloader Screen in Wix
https://www.picklewix.com/wix-preloader
As you are using html code for this, Wix won't provide support for help with third party provided code, as stated in the pages here.
https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site
https://support.wix.com/en/article/embedding-custom-code-to-your-site
Have a look here at this previous forum post about using a preloader as it gives you a good working example and is in the same style with using html in a custom new tool in Tracking and Analytics.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website
Or outside websites here.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-HTML-PRELOADER
https://futurevisionweb.wixsite.com/futurecodemain/preloader-tool
Finally, with your last line here...
So for that, the code is working, but i have a problem, when the site has finished loading, all elements like, pictures, menu... are completely blurred...
This can mean that the page is not fully loaded yet and the images are simply shown blurred (like low res samples) until the page has fully loaded.
Note that the larger your used images are, then the longer it will take for them all to load.
As stated here.
https://support.wix.com/en/article/request-disable-the-loading-of-low-resolution-images-before-the-high-resolution-ones
https://support.wix.com/en/article/setting-the-image-quality-for-wix-pro-gallery-images
https://support.wix.com/en/article/media-and-site-performance
May i know why when i input your code, <body bgcolor=#222222> error shows up?
Hi Just asking, the above are all preloader codes?
Here is the original site display without the preloader lines from ''analytics and monitoring tools''