Animated Loader V7

Animated Loader V7
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 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">&#169; 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.

0 comments: