Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE HTML PRELOADER
Need to add a preloader to your Wix website? This tutorial will show you how to create a preloader for your Wix website using HTML. Show a preloader while your webpages load and reduce bounce rates. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Go to Wix Dashboard > Manage Website > Tracking & Analytics
Then click "+ New Tool" and </> Custom to add HTML code.
When visitors get directed to your website, they will see a preloader while your webpages are loading.
Go to Wix Dashboard > Manage Website > Tracking & Analytics
THE ELEMENTS
The Page
None.
THE CODE
Tracking Tools & Analytics
Go to Wix Dashboard > Manage Website > Tracking & Analytics > Add New Tool > </> Custom
// Add Code //
<div class="spinner" id="preloader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</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;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #000000;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Please complete all required fields.
No comments. Be the first to leave a comment.
Perfect, the best solution for a preloader. Thank you.
Andrea Daniels
Dec 31, 2018
8
You are most welcome Andrea! Glad you found our solution useful.
Ben (Vorbly)
Dec 31, 2018
3
How could I add my company logo to the preloader?Tried adding to the html an image from src but it destroys the layout of the actual website
mel
Jan 25, 2019
5
Hi Mel,
When working in a closed environment like Wix, changing the header code can be tricky and might affect your page code.
If you are looking for a custom preloader, the simplest way is to implement the preloader on your site or page code directly. Wix has created a tutorial for this, www.wix.com/code/home/example/Preloader.
However, the limitation of this solution is that the preloader isn't an actual preloader. It does not wait for your page to complete loading. Instead, you will need to setTimeout (or delay) manually for the preloader (e.g. 1500 / 1.5 secs).
Please feel free to contact us if you have any further queries. Thank you!
Andrew (Vorbly)
Jan 25, 2019
3
Thank you for your reply.
I have tried the wix code and many other solutions,somehow this is not over passing the wix "limitations"
mel
Jan 26, 2019
2