Vorbly <Code>
CODING MADE EASY WITH VORBLY
HTML PRELOADER FOR WEBSITE
Need to add a preloader to your website? This tutorial will show you how to create a preloader for your 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
When visitors get directed to your website, they will see a preloader while your webpages are loading. Just add preloader code to your HTML header.
When visitors get directed to your website, they will see a preloader while your webpages are loading. Just add preloader code to your HTML header.
THE ELEMENTS
The Page
None.
THE CODE
Tracking Tools & Analytics
// Add code to header //
<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.
The code doesn't seem to work when I go from page to page. It does work when I initially load my home page....any thoughts?
Mark
Jul 01, 2020
1
