 |
| Simple Loader made with CSS and JS |
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 V2.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body onload="animate()">
<div id="box1" ></div>
<div id="box2" ></div>
<div id="box3" ></div>
<div id="step1"></div>
<div id="step2"></div>
<div id="step3"></div>
<div id="step4"></div>
<div id="step5"></div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style>
#box1{
position:Absolute;
top:40%;
left:35%;
width:120px;
height:120px;
background-color:rgb(123,218,205);
border-radius:4px;
opacity:0.75;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#box2{
position:Absolute;
top:40%;
left:35%;
width:120px;
height:120px;
background-color:rgb(245,147,182);
border-radius:4px;
opacity:0.75;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#box3{
position:Absolute;
top:40%;
left:35%;
width:120px;
height:120px;
background-color:rgb(131,203,237);
border-radius:4px;
opacity:0.75;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#step1{
height:0px;
width:0px;
}
#step2{
height:0px;
width:0px;
}
#step3{
height:0px;
width:0px;
}
#step4{
height:0px;
width:0px;
}
#copyright{
top:5px;
left:0px;
width:100%;
height: 50px;
color: white;
text-align: center;
}
#copyright a{
text-decoration: none;
color:black;
}
#step5{
height:0px;
width:0px;
}
</style>
<script>
function animate(){
var b1 = document.getElementById("box1");
var b2 = document.getElementById("box2");
var b3 = document.getElementById("box3");
var s1 = document.getElementById("step1");
var s2 = document.getElementById("step2");
var s3 = document.getElementById("step3");
var s4 = document.getElementById("step4");
var s5 = document.getElementById("step5");
if(s1.style.opacity!="0")
{
b3.style.left="52%";
b2.style.left="46%";
b1.style.left="40%";
b1.style.transform="rotate(-40deg)";
b2.style.transform="rotate(-40deg)";
b3.style.transform="rotate(-40deg)";
s1.style.opacity="0";
s2.style.opacity="1";
}
else if(s2.style.opacity!="0")
{
b3.style.transform="rotate(70deg)";
b2.style.transform="rotate(70deg)";
b1.style.transform="rotate(70deg)";
b2.style.left="40%";
b3.style.left="40%";
b1.style.left="35%";
s2.style.opacity="0";
s3.style.opacity="1";
}
else if(s3.style.opacity!="0")
{
b3.style.left="35%";
b2.style.left="35%";
b1.style.left="35%";
b1.style.transform="rotate(90deg)";
b2.style.transform="rotate(120deg)";
b3.style.transform="rotate(150deg)";
s3.style.opacity="0";
s4.style.opacity="1";
}
else if(s4.style.opacity!="0")
{
b1.style.transform="rotate(-90deg)";
b2.style.transform="rotate(-120deg)";
b3.style.transform="rotate(-150deg)";
s4.style.opacity="0";
s5.style.opacity="1";
}
else if(s5.style.opacity!="0")
{
b1.style.transform="rotate(0deg)";
b2.style.transform="rotate(0deg)";
b3.style.transform="rotate(0deg)";
s5.style.opacity="0";
s1.style.opacity="1";
}
setTimeout("animate()",400);
}
</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: