Pre Loader V5.0 (With two different animation)

by Unknown 10:18 0 comments
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.






Labels:

About author: Usama Moin

I am Usama Moin,author and co-founder of roundCube,I love writing codes and stuff.

0 comments:

Subscribe to: Post Comments (Atom)