 |
| Pre loader V4.0 |
Related Articles:
Fully Responsive Login Form V7.0 based on Bootstrap
Pixelated Art Via HTML & CSS
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 V4.0 by roundCube</title>
</head>
<body onload="animate()">
<div id="loader">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style>
#loader{
position: absolute;
top:40%;
height:80px;
width:100px;
left:45%;
}
#line1{
position: absolute;
top:0px;
left:0px;
width:1%;
height:10%;
background-color: #313131;
-webkit-transition: all 0.37s ease;
-moz-transition : all 0.37s ease 0s;
}
#line2{
position: absolute;
top:37.5px;
left:0px;
width:0%;
height:10%;
background-color: #313131;
-webkit-transition: all 0.37s ease;
-moz-transition : all 0.37s ease 0s;
}
#line3{
position: absolute;
bottom:0px;
left:0px;
width:0%;
height:10%;
background-color: #313131;
-webkit-transition: all 0.37s ease;
-moz-transition : all 0.37s ease 0s;
}
#copyright{
position: absolute;
top:5px;
left:0px;
width:100%;
height:10%;
text-align: center;
}
#copyright a{
color:black;
text-decoration: none;
}
</style>
<script>
function animate(){
var l1 = document.getElementById("line1");
var l2 = document.getElementById("line2");
var l3 = document.getElementById("line3");
if(l1.style.width!="100%" && l1.style.width!="0.001%")
{
l1.style.width="100%";
}
else if(l2.style.width!="100%" && l2.style.width!="0.001%")
{
l2.style.width="100%";
}
else if(l3.style.width!="100%")
{
l3.style.width="100%";
}
else if(l1.style.width!="0.001%"){
l1.style.width="0.001%";
}
else if(l2.style.width!="0.001%"){
l2.style.width="0.001%";
}
else if(l3.style.width!="0.001%"){
l3.style.width="0.001%";
l1.style.width="0%";
l2.style.width="0%";
}
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: