Home » HTML and jQuery » Add Simple Pre Loader to Your Site

Add Simple Pre Loader to Your Site

A pre loader is an image/animation which shows while the site loads a page completely. Now a days it is very demanding . So today we will create a very simple animated text preloader for a site.

add this code into your html head section.



<script>
 var htmlElement = document.querySelector("html");
 htmlElement.style.overflow = 'hidden';
 window.addEventListener("load", function(){
 var load_screen = document.getElementById("load_screen");
 document.body.removeChild(load_screen);
 htmlElement.style.overflow = 'visible';
 });
</script>

 

add this code before body tag



<div id="load_screen"><div id="loading">Please Wait...</div></div>

 

add the proper style for the text. i have included some animation to the text. A moving animation using css3.



div#load_screen{
 background: #fff;
 opacity: 1;
 position: fixed;
 z-index:10;
 top: 0px;
 width: 100%;
 height: 1600px;
}
div#load_screen > div#loading{
 color:#95C062;
 width:auto;
 height:auto;
 margin: 19% auto;
 border-radius: 100%;
 font-family: 'Open Sans';
 font-size: 100px;
 font-weight: bold;
 text-align: center;
 position: relative;
 -webkit-animation-name: example; /* Chrome, Safari, Opera */
 -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
 animation-name: example;
 animation-duration: 4s;
 -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
 animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
 0% {color:#96B915; left:0px; top:0px;}
 25% {color:#E4E62A; left:5%; top:0px;}
 50% {color:#639A05; left:5%; top:5%;}
 75% {color:#91BB5F; left:0px; top:5%;}
 100% {color:#E4E62A; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
 0% {color:#96B915; left:0px; top:0px;}
 25% {color:#E4E62A; left:5%; top:0px;}
 50% {color:#639A05; left:5%; top:5%;}
 75% {color:#91BB5F; left:0px; top:5%;}
 100% {color:#E4E62A; left:0px; top:0px;}
}
@media (max-width: 768px) {
 div#load_screen > div#loading {
 font-size: 40px;
 margin: 50% auto;
 }
}

 

and you are done. very simple isn’t it.

About

I picked PHP and JavaScript as a career start-up and developed a lot of applications using these. Like Management Application, Web Scrapping, Web API, E-Commerce Solutions, Finance Application etc. Outside of my professional life, I also do projects and code for reputation and my personal portfolio.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*