Bootstrap Animated Progress Bars

by wholypantalones

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="progress">
    <div class="progress-bar" data-values="40">0</div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar" data-values="20">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" data-values="60">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" data-values="30">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" data-values="90">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" data-values="80">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" data-values="60">0</div>
    <div class="progress-bar" data-values="40">0</div>
</div>

CSS

body {
    padding:10px;
}

JavaScript

$(".progress div").each(function () {
    var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr("data-values"),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
    if (nextValue == "0") {
        $(display).css("padding", "0");
    } else {
        $(display).css("color", "#fff").animate({
            "width": nextValue + "%"
        }, "slow");
    }

    for (var i = 0; i < Math.abs(diff); ++i) {
        setTimeout(function () {
            currentValue += step
            display.html(currentValue + "%");
        }, 20 * i);
    }
});