Progress Bar

HTML

<div class="meter">
    <span style="width: 25%" id='a'></span>
</div>

<div class="meter animate">
    <span style="width: 50%"><span></span></span>
</div>

CSS

.meter {
    height: 20px;
    position: relative;
    background: #555;
    border-radius: 25px;
    padding: 10px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: rgb(43,194,83);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)));
    background: -webkit-linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69%);
    background: -moz-linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69%);
    background: -ms-linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
    background: -o-linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69%);
    box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.orange > span {
    background: #f1a165;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
    background: -webkit-linear-gradient(top, #f1a165, #f36d0a);
    background: -moz-linear-gradient(top, #f1a165, #f36d0a);
    background: -ms-linear-gradient(top, #f1a165, #f36d0a);
    background: -o-linear-gradient(top, #f1a165, #f36d0a);
}

.red > span {
    background: #f0a3a3;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
    background: -webkit-linear-gradient(top, #f0a3a3, #f42323);
    background: -moz-linear-gradient(top, #f0a3a3, #f42323);
    background: -ms-linear-gradient(top, #f0a3a3, #f42323);
    background: -o-linear-gradient(top, #f0a3a3, #f42323);
}

.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:...

JavaScript

$(window).load(function(){
  $(".meter > span").each(function() {
    $(this).data("origWidth", $(this).width()).width(0).animate({
        width: $(this).data("origWidth")
    }, 1200);
});

  });