Vorbly Code | HTML PRELOADER FOR WEBSITE

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

1/1

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP