 |
| Animated Loader V7 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V7.0 by roundCube</title>
</head>
<body onload="animate()">
<div id="bigblock">
<div id="loader">
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
<div id="block6"></div>
<div id="block7"></div>
<div id="block8"></div>
</div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style>
#loader{
position: absolute;
top:50px;
left:50px;
height:70px;
width:70px;
}
#bigblock{
position: absolute;
top:35%;
left:40%;
width:170px;
height:170px;
}
#block1{
position: absolute;
top:0px;
left:0px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 0.1s ease;
-moz-transition : all 0.1s ease 0s;
}
#block2{
position: absolute;
top:0px;
left:23.33px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 0.25s ease;
-moz-transition : all 0.25s ease 0s;
}
#block3{
position: absolute;
top:0px;
left:46.66px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease 0s;
}
#block4{
position: absolute;
top:23.33px;
left:46.66px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 0.6s ease;
-moz-transition : all 0.6s ease 0s;
}
#block5{
position: absolute;
top:46.66px;
left:46.66px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;
}
#block6{
position: absolute;
top:46.66px;
left:23.33px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 0.9s ease;
-moz-transition : all 0.9s ease 0s;
}
#block7{
position: absolute;
top:46.66px;
left:0px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 1.05s ease;
-moz-transition : all 1.05s ease 0s;
}
#block8{
position: absolute;
top:23.33px;
left:0px;
height:23.33px;
width:23.33px;
background-color: white;
-webkit-transition: all 1.25s ease;
-moz-transition : all 1.25s ease 0s;
}
body{
background-color: teal;
}
#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 b1= document.getElementById("block1");
var b2= document.getElementById("block2");
var b3= document.getElementById("block3");
var b4= document.getElementById("block4");
var b5= document.getElementById("block5");
var b6= document.getElementById("block6");
var b7= document.getElementById("block7");
var b8= document.getElementById("block8");
var loader= document.getElementById("loader");
if(b1.style.top!="-50px"){
b1.style.top="-50px";
b1.style.left="-50px";
b2.style.top="-50px";
b2.style.left="23.33px";
b3.style.top="-50px";
b3.style.left="95px";
b4.style.top="21px";
b4.style.left="96px";
b5.style.top="96px";
b5.style.left="96px";
b6.style.top="96px";
b6.style.left="23.33px";
b7.style.top="96px";
b7.style.left="-50px";
b8.style.top="21px";
b8.style.left="-50px";
}
else{
b1.style.top="0px";
b1.style.left="0px";
b2.style.top="0px";
b2.style.left="23.33px";
b3.style.top="0px";
b3.style.left="46.66px";
b4.style.top="23.33px";
b4.style.left="46.66px";
b5.style.top="46.66px";
b5.style.left="46.66px";
b6.style.top="46.66px";
b6.style.left="23.33px";
b7.style.top="46.66px";
b7.style.left="0px";
b8.style.top="23.33px";
b8.style.left="0px";
}
setTimeout("animate()",1290);
}
</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.
![Pinterest](http://pinterest.com/pin/create/button/?url=http://roundcubee.blogspot.com/2015/08/animated-loader-v7.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_y1To9ABHPx1JUc5Vu8UiN-od-IvEwrdsIDR7k7lHQY69lI3s6LwArnrIuC_nHp0rq7Al9pQk0U7EFIZOuj2RP9iRR2FFdUjTeGbbJ9xZ2LdkKmMc8la-QD2L5ukMYHE0c3djmKxFfnI/s72-c/ezgif.com-video-to-gif+%25284%2529.gif&description= Animated Loader V7 Here's the code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"...){kind=link}
0 comments: