Pure CSS Progress Bar | Animated with CSS3

The Html Markup :

All we need is two Divs for this, the first div will represent the main container and will have rounded corners and a shadow effect, the second div is the actual progress bar.

Also I added an input and a button to control and play with the progress bar.  

<div id="prbar">
  <div id="prpos">
  </div>
</div>

<input id="moveTo" value="57" style="width:30px;" />%
<button onclick="MoveTo();return false;">Move</button>

The CSS :

#prbar {
    margin:5px;
    width:500px;
    background-color:#dddddd;
    overflow:hidden;
    
    /* Rounded Border */
    border: 1px solid #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
            
    /* Adding some shadow to the progress bar */
    -webkit-box-shadow: 0px 2px 4px #555555;
    -moz-box-shadow: 0px 2px 4px #555555;
    box-shadow: 0px 2px 4px #555555;            
}
        
/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, #prbar {
  border-radius:0px;
}
        
#prpos {
    width:0%;
    height:30px;
    background-color:#3399ff;
    border-right:1px solid #bbbbbb;
           
    /* CSS3 Progress Bar Transitions */
    transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 0s ease;
    -ms-transition: width 0s ease;
   
    /* CSS3 Stripes */
    background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
    background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-size: 40px 40px;

    /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -moz-animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -o-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;
}
        
@keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-moz-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-webkit-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-o-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-ms-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}

The width and height of the progress bar need to be specified only once, the width is specified in the 'prbar' selector and the height in 'prpos'.

You can compose any background stripes you want or any texture for instance using linear-gradient, you can draw gradients, lines, circles..

The Animation :

Now to animate our progress bar, we only have to set a new width for the second div, the easiest way of course is to specify directly a percentage-based width.

This small javascript function will read the input value, and set the width to animate the progress bar.

function MoveTo() {
    var prpos = document.getElementById('prpos');
    prpos.style.width = document.getElementById('moveTo').value + "%";
}

This progress bar will work run on latest versions of major web browsers.

I'd love to hear your thoughts and ideas, so feel free to comment.
And if you like this tutorial, please Share it.