 |
| Animated Loader |
Related Articles:
Fully Responsive Login Form V5.0 based on Bootstrap
Pixelated Art Via HTML & CSS
Here's the source code:
</head><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V3.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body onload="animate()">
<div id="loader">
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<div id="inner4"></div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style >
#loader{
position: absolute;
left:44%;
top:35%;
height: 150px;
width:150px;
transform: rotate(45deg);
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#inner1{
position: absolute;
top:0px;
left:0px;
height: 65px;
width:65px;
background-color: rgb(255, 163, 55);
border-radius: 5px;
border-width:4px;
border-style: solid;
border-color: rgb(255, 163, 55);;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#inner2{
position: absolute;
top:0px;
right:0px;
height: 65px;
width:65px;
background-color: rgb(255, 163, 55);;
border-radius: 5px;
border-width:4px;
border-style: solid;
border-color: rgb(255, 163, 55);;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#inner3{
position: absolute;
bottom:0px;
left:0px;
height: 65px;
width:65px;
background-color: rgb(255, 163, 55);;
border-radius: 5px;
border-width:4px;
border-style: solid;
border-color: rgb(255, 163, 55);;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#inner4{
position: absolute;
bottom:0px;
right:0px;
height: 65px;
width:65px;
background-color: rgb(255, 163, 55);;
border-radius: 5px;
border-width:4px;
border-style: solid;
border-color: rgb(255, 163, 55);;
-webkit-transition: all 0.7s ease;
-moz-transition : all 0.7s ease 0s;
}
#copyright{
top:5px;
left:0px;
width:100%;
height: 50px;
color: white;
text-align: center;
}
#copyright a{
text-decoration: none;
color:black;
}
</style>
<script>
function animate(){
var i1 = document.getElementById("inner1");
var i2 = document.getElementById("inner2");
var i3 = document.getElementById("inner3");
var i4 = document.getElementById("inner4");
var loading = document.getElementById("loader");
if(i1.style.top!="-30px")
{
i1.style.top="-30px";
i1.style.left="-30px";
i2.style.top="-30px";
i2.style.right="-30px";
i3.style.bottom="-30px";
i3.style.left="-30px";
i4.style.bottom="-30px";
i4.style.right="-30px";
}
else if(i1.style.background!="none"){
loading.style.transform="rotate(135deg)";
i1.style.background="none";
i2.style.background="none";
i3.style.background="none";
i4.style.background="none";
}
else if(loading.style.transform!="rotate(225deg)"){
loading.style.transform="rotate(225deg)";
}
else{
i1.style.top="0px";
i2.style.top="0px";
i3.style.bottom="0px";
i4.style.bottom="0px";
i1.style.left="0px";
i2.style.right="0px";
i3.style.left="0px";
i4.style.right="0px";
loading.style.transform="rotate(45deg)"
i1.style.background="rgb(255, 163, 55)";
i2.style.background="rgb(255, 163, 55)";
i3.style.background="rgb(255, 163, 55)";
i4.style.background="rgb(255, 163, 55)";
}
setTimeout("animate()",600);
}
</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: