Showing posts with label Loading. 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.
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.






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 V1.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <![endif]-->

 </head>


 <body>
<div id="background">
<div id="button" onclick="loading()"><h1 style="text-align:center;color:white;font-size:90px;line-height:0.5;"><b>Enter</b></h1></div>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
<div id="bg4"></div>
<div id="bg5"></div>
<div id="bg6"></div>
<div id="loading"><h1 style="text-align:center;color:white;font-size:90px;line-height:0.5;"><b>Loading..</b></h1></div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
</div>


 </body>
 <style>
 #background{
 position:absolute;
 top:0px;
 left:0px;
 height:100%;
 width:100%;
 background-color:white;
  -webkit-transition: all 1.10s ease;
-moz-transition : all 1.10s ease 0s;
 }

 #button{
  position:absolute;
 top:43%;
 left:37.5%;
 height:87px;
 width:25%;
 background-color:rgb(255,136,136);
border-bottom-width:8px;
border-bottom-color:rgb(255,187,187);
border-bottom-style:solid;
  -webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;
cursor: pointer;
cursor: hand;

 }



 #button:hover{
 height:16%;
 top:43.2%;
 border-bottom-width:15px;

 }

 #bg1{
 position:absolute;
 top:100%;
 left:0px;
 height:0%;
 width:100%;
background-color:rgb(255,255,68);
  -webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;

 }

  #bg2{
 position:absolute;
 top:100%;
 left:0px;
 height:0%;
 width:100%;
background-color:rgb(255,68,68);
  -webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;

 }

   #bg3{
 position:absolute;
 top:100%;
 left:0px;
 height:0%;
 width:100%;
background-color:rgb(68,68,255);
  -webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;

 }

   #bg4{
 position:absolute;
 top:100%;
 left:0px;
 height:0%;
 width:100%;
background-color:rgb(255,68,255);
  -webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;

 }

 #bg5{
 position:absolute;
 top:100%;
 left:0px;
 height:0%;
 width:100%;
background-color:rgb(255,255,68);
  -webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;

 }

  #bg6{
 position:absolute;
 top:100%;
 left:0px;
 height:0%;
 width:100%;
background-color:rgb(255,68,68);
  -webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;

 }

 #loading{
  position:absolute;
 top:43%;
 left:37.5%;
 height:14%;
 width:25%;
 opacity:0;
 visibility:hidden;
  -webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;

 }

 #copyright{
 position:absolute;
 bottom:5px;
 left:0px;
 width:100%;
 height:50px;
 color:white;
 text-align:center;

 }
 #copyright a{
 text-decoration:none;
 color:white;

 }

 @media only screen and (max-width:960px)
{
#button b,#loading b{
font-size:70px;
}
}

 @media only screen and (max-width:750px)
{
#button b,#loading b{
font-size:60px;
line-height:0.4;
}
}

 @media only screen and (max-width:580px)
{
#button b,#loading b{
font-size:45px;
line-height:0;
}

 @media only screen and (max-width:459px)
{
#button,#loading{
width:40%;
left:30%;
}



 </style>

 <script>
 function loading(){
 var button = document.getElementById("button");
 var bg1 = document.getElementById("bg1");
 var bg2 = document.getElementById("bg2");
 var bg3 = document.getElementById("bg3");
 var bg4 = document.getElementById("bg4");
 var bg5 = document.getElementById("bg5");
 var bg6 = document.getElementById("bg6");
 var loading = document.getElementById("loading");
 var background = document.getElementById("background");

 if(bg6.style.top=="0%")
 {
background.style.visibility="hidden";
background.style.opacity="0";
 }

  else if(bg5.style.top=="0%")
 {
bg6.style.height="100%";
bg6.style.top="0%";
 }

  else if(bg4.style.top=="0%")
 {
bg5.style.height="100%";
bg5.style.top="0%";
 }

  else if(bg3.style.top=="0%")
 {
bg4.style.height="100%";
bg4.style.top="0%";
 }


 else if(bg2.style.top=="0%")
 {
bg3.style.height="100%";
bg3.style.top="0%";
 }

 else if(bg1.style.top=="0%")
 {
bg2.style.height="100%";
bg2.style.top="0%";
 }


  else if(button.style.opacity=="0")
 {
bg1.style.height="100%";
bg1.style.top="0%";
 }

button.style.opacity="0";
loading.style.opacity="1";
loading.style.visibility="visible";


   setTimeout("loading()",1000);
 }
 </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)