I create mousemade pixel perfection stuffs for the interwebs.

CSS3+jQuery Animated Steps Indicator for Mobile

I wanted to try and create an animated steps indicator. This was primary for mobile. The code is a bit messy =). This could be replicated with just using jQuery, but i wanted to leverage CSS3.

View Demo Note: the demo is not as pretty =)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1" />
	<title>CSS3 Animated Steps</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
             $("#s1").click(function(){
                $("#progressbar").addClass("step1");
                 return false;
             });
            $("#s2").click(function(){
                $("#progressbar").addClass("step2");
                 return false;
             });
            $("#s3").click(function(){
                $("#progressbar").addClass("step3");
                 return false;
             });
        });
    </script>
    <style type="text/css">
        body{background-color:black;}
        #animatedSteps{
            width:280px;
            height:14px;
            margin: 80px auto 0 auto;
            position:relative;
            overflow:hidden;
            background-color:#fff;
        }
        #mask{
            background:transparent url(steps-mask.png) top left no-repeat;
            width:280px;
            height:14px;
            position:relative;
            z-index:2;
        }
        #progressbar{
            background: #e4f5fc; /* Old browsers */
            background: -moz-linear-gradient(top,  #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
            width:280px;
            height:14px;
            position:absolute;
            z-index:1;
            top:0;
            left:-278px;
           -webkit-transition: left 1s ease;
        }
        #progressbar.step1{
            left:-213px;   
        }
        #progressbar.step2{
            left:-139px;   
        }
         #progressbar.step3{
            left:-58px;   
        }
             
    </style>
    
</head> 
<body>   
    <div id="animatedSteps">
        <div id="mask"></div>
        <div id="progressbar"></div>
    </div>
    
    
    <button id="s1">Step 1</button> <br /><button id="s2">Step 2</button><br /> <button id="s3">Step 3</button>
    
</body>
</html>

Some HTML is OK