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