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.
Step into the future with CyberNetikz, where we craft tomorrow’s tech innovations with today’s coding artistry Mega Medusa Casino.