Animated progress bar

by Keith Jeter

HTML

<div id="loader">
   <div id="bar"></div>
</div>

CSS

/* Basic Reset */
* {
        margin: 0;
        padding: 0;
}

html, body {
        background: #252525;
}

#loader {
        margin: 50px auto;
        
        background: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#2E2E2E));
        background: -moz-linear-gradient(top, #292929, #2E2E2E);
        
        width: 200px;
        height: 20px;
        
        -webkit-box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
        
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        
        border: 4px solid rgba(255, 255, 255, 0.05);
}

#bar {
        height: 20px;
        min-width: 21px;
        width: 90px;
        
        background: -webkit-gradient(linear, left top, left bottom, from(#4892D9), to(#1960BC));
        background: -moz-linear-gradient(top, #4892D9, #1960BC);
        
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        
        -webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
        -moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
        box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
}

JavaScript

$(function(){
    var loader = $('#loader');
    var bar = $('#bar');
    var max_width = loader.width();
    var time = 1000; // Time of the animation (3 sec.)
    
    // Sets the bar width to 0
    bar.width(0);
    
    bar.animate({
        width: max_width
    }, time);
  
});