Showing posts with label Loader. Show all posts
Animated Text Revealer


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>Animated Text Revealer by roundCube</title>

 
 </head>
   
<body onload="animate()">
    <a href="http://www.facebook.com/roundCubeInc">
    <div id="textForRevealing">
        roundCube
        <div id="maskRight"></div>
        <div id="maskLeft"></div>
        <Div id="floater"></Div>
    </div></a>
   
</body>
   
<style>
  #textForRevealing{
      position: absolute;
      top:20%;
      left:30%;
      width:40%;
      height:77px;
      background-color: orange;
      font-size: 70px;
      text-align: center;
      font-family: sans-serif;
      text-decoration: none;
      color: black;
  }
   
#floater{
    position: absolute;
    left:0%;
    height:100%;
    top:0px;
    width:77px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQyqsRQVxBjwUZmGSyODbsImNL91tAd4IaqUD5FC-kzf5D8FCluzQNqd68bhyphenhyphenF8-HZL6f6KuA8j825ytDeVdGP4l1d9brkLgN77VRvzFw252osN-LB1-_UP2ibw1RpZhJisy2PQ8z6T7Y/s1600/floater.png);
    background-size: 100% 100%;
        -webkit-transition: all 1.75s ease;
        -moz-transition : all 1.75s ease 0s;

}  
#maskRight{
    position: absolute;
    right:0px;
    width:85.8%;
    top:0px;
    height:100%;
    background-color: white;
        -webkit-transition: all 1.75s ease;
        -moz-transition : all 1.75s ease 0s;
}
   
#maskLeft{
    position: absolute;
    left:0px;
    width:0%;
    top:0px;
    height:100%;
    background-color: white;
        -webkit-transition: all 1.75s ease;
        -moz-transition : all 1.75s ease 0s;
}
   
   
</style>
   
<script>
   function animate(){
            var ml= document.getElementById("maskLeft");
            var mr= document.getElementById("maskRight");
            var floater= document.getElementById("floater");
     
       if(ml.style.width!="85.8%")
       {
           ml.style.width="85.8%";
           mr.style.width="0%";
           floater.style.left="85.8%";

       }
       else{
           ml.style.width="0%";
           mr.style.width="85.8%";
           floater.style.left="0%";  
       }
           setTimeout("animate()",1790);
   }
   
</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.
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.
Pre Loader V6 which comes with a space where you can include your logo

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 V6.0 by roundCube</title>

  
 </head>
    
<body onload="animate()">
    <div id="loader">
        <div id="square"></div>
        <div id="logo"></div>
    </div>
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
    <div id="s4"></div>
    <div id="s5"></div>
    <div id="s6"></div>
    <div id="s7"></div>
    <div id="s8"></div>
    
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div> 
    
</body>
    
<style >

#loader{
    position: absolute;
    top:30%;
    left:42%;
    width:220px;
    height:220px;
}
    
#logo{
    position: absolute;
    top:45px;
    left:45px;
    height: 130px;
    width: 130px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
    background-size: 100% 100%;
}
    
#square{
    position: absolute;
    top:0px;
    left:0px;
    width:45px;
    height:45px;
    background-color: rgb(40,42,54);
         -webkit-transition: all 0.35s ease;
        -moz-transition : all 0.35s ease 0s;
}
    
#copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}
    
#s1,#s2,#s3,#s4,#s5,#s6,#s7{
    height:10%;
}
    
    
</style>
    
<script>
    function animate(){
        var square = document.getElementById("square"); 
        var s1 = document.getElementById("s1"); 
        var s2 = document.getElementById("s2"); 
        var s3 = document.getElementById("s3"); 
        var s4 = document.getElementById("s4"); 
        var s5 = document.getElementById("s5"); 
        var s6 = document.getElementById("s6"); 
        var s7 = document.getElementById("s7"); 
        var s8 = document.getElementById("s8"); 
        
        if(s1.style.height!="0%"){
            square.style.width="100%";
            s1.style.height="0%";
            square.style.opacity="0.7";
        }
        
        else if(s2.style.height!="0%"){
            square.style.width="45px";
            square.style.left="175px";
            s2.style.height="0%";
            square.style.opacity="1";
        }
        else if(s3.style.height!="0%"){
            square.style.left="175px";
            square.style.height="100%";
            s3.style.height="0%";
            square.style.opacity="0.7";
        }
        
        else if(s4.style.height!="0%"){
            square.style.top="175px";
            square.style.height="45px";
            s4.style.height="0%";
            square.style.opacity="1";
        }
        else if(s5.style.height!="0%"){
            square.style.left="0%";
            square.style.width="100%";
            s5.style.height="0%";
            square.style.opacity="0.7";
        }
          else if(s6.style.height!="0%"){
            square.style.width="45px";
            s6.style.height="0%";
            square.style.opacity="1";
        }
        else if(s7.style.height!="0%"){
            square.style.top="0%";
            square.style.height="100%";
            s7.style.height="0%";
            square.style.opacity="0.7";
        }
        else if(s8.style.height!="0%"){
            square.style.height="45px";
            square.style.opacity="1";
            s1.style.height="5%";
            s2.style.height="5%";
            s3.style.height="5%";
            s4.style.height="5%";
            s5.style.height="5%";
            s6.style.height="5%";
            s7.style.height="5%";
            s8.style.height="5%";
        }
        
        
        

            
        
        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.
Pre Loader V5.0 (Animation 1)

Pre Loader V5.0 (Animation 2)

Related Articles:



Here's the code snippet:

Animation 1:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V5.0 by roundCube</title>

  
 </head>
    
<body onload="animate()">
    <div id="loader">
        <div id="bar1"></div>
        <div id="bar2"></div>
        <div id="bar3"></div>
        <div id="bar4"></div>
        <div id="bar5"></div>
    </div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>    
</body>
<style>
    #loader{
        position: absolute;
        left: 35%;
        width:25%;
        top:30%;
        height:24%;
    }

#copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}
       
    #bar1{
        position: absolute;
        bottom:0px;
        height:2%;
        left:0px;
        width:15%;
        background-color: orange;
 -webkit-transition: all 0.4s ease;
 -moz-transition : all 0.4s ease 0s;
    }
    
    #bar2{
        position: absolute;
        bottom:0px;
        height:2%;
        left:20%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
    }
    
    #bar3{
        position: absolute;
        bottom:0px;
        height:2%;
        left:40%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
    }
    
    #bar4{
        position: absolute;
        bottom:0px;
        height:2%;
        left:60%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
    }

    #bar5{
        position: absolute;
        bottom:0px;
        height:2%;
        left:80%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
    }
    
</style>
<script>
    function animate(){
        var b1 = document.getElementById("bar1");    
        var b2 = document.getElementById("bar2");
        var b3 = document.getElementById("bar3");    
        var b4 = document.getElementById("bar4");
        var b5 = document.getElementById("bar5");   
        
        if(b1.style.height!="100%" && b1.style.zIndex!="5")
        {
            b1.style.height="100%";
        }
        else if(b2.style.height!="100%" && b2.style.zIndex!="5")
        {
            b2.style.height="100%";
        }
        else if(b3.style.height!="100%" && b3.style.zIndex!="5")
        {
            b3.style.height="100%";
        }
        else if(b4.style.height!="100%" && b4.style.zIndex!="5")
        {
            b4.style.height="100%";
        }
        else if(b5.style.height!="100%" && b5.style.zIndex!="5")
        {
            b5.style.height="100%";
        }
        else if(b1.style.zIndex!="5"){
            b1.style.height="0%";
            b1.style.zIndex="5";
        }
        else if(b2.style.zIndex!="5"){
            b2.style.height="0%";
            b2.style.zIndex="5";
        }
        else if(b3.style.zIndex!="5"){
            b3.style.height="0%";
            b3.style.zIndex="5";
        }
        else if(b4.style.zIndex!="5"){
            b4.style.height="0%";
            b4.style.zIndex="5";
        }
        else if(b5.style.zIndex!="5"){
            b5.style.height="0%";
            b1.style.zIndex="0";
            b2.style.zIndex="0";
            b3.style.zIndex="0";
            b4.style.zIndex="0";
            b5.style.zIndex="0";
        }
        
        setTimeout("animate()",200);
    }
    
</script>
</html>

Animation 2:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V5.0 by roundCube</title>

  
 </head>
    
<body onload="animate()">
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
    <div id="s4"></div>
    <div id="s5"></div>
    <div id="s6"></div>
    <div id="s7"></div>
    <div id="s8"></div>
    <div id="s9"></div>
    <div id="loader">
        <div id="bar1"></div>
        <div id="bar2"></div>
        <div id="bar3"></div>
        <div id="bar4"></div>
        <div id="bar5"></div>
    </div>
 <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>   
</body>
<style>
    #loader{
        position: absolute;
        left: 35%;
        width:25%;
        top:30%;
        height:24%;
    }
    
#copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}
   
    
    #bar1{
        position: absolute;
        bottom:0px;
        height:2%;
        left:0px;
        width:15%;
        background-color: orange;
 -webkit-transition: all 0.4s ease;
 -moz-transition : all 0.4s ease 0s;
        z-index: 0;
    }
    
    #bar2{
        position: absolute;
        bottom:0px;
        height:2%;
        left:20%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
        z-index: 0;
    }
    
    #bar3{
        position: absolute;
        bottom:0px;
        height:2%;
        left:40%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
        z-index: 0;
    }
    
    #bar4{
        position: absolute;
        bottom:0px;
        height:2%;
        left:60%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
        z-index: 0;
    }

    #bar5{
        position: absolute;
        bottom:0px;
        height:2%;
        left:80%;
        width:15%;
        background-color: orange;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
        z-index: 0;
    }
    
    #s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9{
        height:1%;
    }
    
    
    
</style>
<script>
    function animate(){
        var b1 = document.getElementById("bar1");    
        var b2 = document.getElementById("bar2");
        var b3 = document.getElementById("bar3");    
        var b4 = document.getElementById("bar4");
        var b5 = document.getElementById("bar5");  
        var s1 = document.getElementById("s1");
        var s2 = document.getElementById("s2");
        var s3 = document.getElementById("s3");
        var s4 = document.getElementById("s4");
        var s5 = document.getElementById("s5");
        var s6 = document.getElementById("s6");
        var s7 = document.getElementById("s7");
        var s8 = document.getElementById("s8");
        var s9 = document.getElementById("s9");
        
        if(s1.style.height!="0%")
        {
            b1.style.height="100%";
            s1.style.height="0%";
            
        }
        else if(s2.style.height!="0%")
        {
            b2.style.height="100%";
            s2.style.height="0%";
        }
        else if(s3.style.height!="0%")
        {
            b3.style.height="100%";
            s3.style.height="0%";
        }
        else if(s4.style.height!="0%")
        {
            b4.style.height="100%";
            s4.style.height="0%";
        }
        else if(s5.style.height!="0%")
        {
            b5.style.height="100%";
            b1.style.height="0%";
            s5.style.height="0%";
        }
        else if(s6.style.height!="0%")
        {
            b2.style.height="0%";
            s6.style.height="0%";
        }
        else if(s7.style.height!="0%")
        {
            b3.style.height="0%";
            s7.style.height="0%";
        }
        else if(s8.style.height!="0%")
        {
            b4.style.height="0%";
            s8.style.height="0%";
        } 
        else if(s9.style.height!="0%")
        {
            b5.style.height="0%";
            s9.style.height="0%";
            s1.style.height="1%";
            s2.style.height="1%";
            s3.style.height="1%";
            s4.style.height="1%";
            s5.style.height="1%";
            s6.style.height="1%";
            s7.style.height="1%";
            s8.style.height="1%";
            s9.style.height="1%";
        }
        

        
        setTimeout("animate()",120);
    }
    
</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.
Pre loader V4.0


Related Articles:

  


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

Related Articles:

p  


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">&#169; 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.
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">&#169; 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.
Subscribe to: Posts (Atom)