 |
| Pre Loader V6 which comes with a space where you can include your logo |
Here's the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V6.0 by roundCube</title>
</head>
<body onload="animate()">
<div id="loader">
<div id="square"></div>
<div id="logo"></div>
</div>
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
<div id="s4"></div>
<div id="s5"></div>
<div id="s6"></div>
<div id="s7"></div>
<div id="s8"></div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style >
#loader{
position: absolute;
top:30%;
left:42%;
width:220px;
height:220px;
}
#logo{
position: absolute;
top:45px;
left:45px;
height: 130px;
width: 130px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
background-size: 100% 100%;
}
#square{
position: absolute;
top:0px;
left:0px;
width:45px;
height:45px;
background-color: rgb(40,42,54);
-webkit-transition: all 0.35s ease;
-moz-transition : all 0.35s ease 0s;
}
#copyright{
top:5px;
left:0px;
width:100%;
height: 50px;
color: white;
text-align: center;
}
#copyright a{
text-decoration: none;
color:black;
}
#s1,#s2,#s3,#s4,#s5,#s6,#s7{
height:10%;
}
</style>
<script>
function animate(){
var square = document.getElementById("square");
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");
var s5 = document.getElementById("s5");
var s6 = document.getElementById("s6");
var s7 = document.getElementById("s7");
var s8 = document.getElementById("s8");
if(s1.style.height!="0%"){
square.style.width="100%";
s1.style.height="0%";
square.style.opacity="0.7";
}
else if(s2.style.height!="0%"){
square.style.width="45px";
square.style.left="175px";
s2.style.height="0%";
square.style.opacity="1";
}
else if(s3.style.height!="0%"){
square.style.left="175px";
square.style.height="100%";
s3.style.height="0%";
square.style.opacity="0.7";
}
else if(s4.style.height!="0%"){
square.style.top="175px";
square.style.height="45px";
s4.style.height="0%";
square.style.opacity="1";
}
else if(s5.style.height!="0%"){
square.style.left="0%";
square.style.width="100%";
s5.style.height="0%";
square.style.opacity="0.7";
}
else if(s6.style.height!="0%"){
square.style.width="45px";
s6.style.height="0%";
square.style.opacity="1";
}
else if(s7.style.height!="0%"){
square.style.top="0%";
square.style.height="100%";
s7.style.height="0%";
square.style.opacity="0.7";
}
else if(s8.style.height!="0%"){
square.style.height="45px";
square.style.opacity="1";
s1.style.height="5%";
s2.style.height="5%";
s3.style.height="5%";
s4.style.height="5%";
s5.style.height="5%";
s6.style.height="5%";
s7.style.height="5%";
s8.style.height="5%";
}
setTimeout("animate()",350);
}
</script>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
0 comments: