Multiple Progress Bars

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<p><strong class="plabel">Master Plan</strong><span class="progress-label index-0"></span>

</p>
<div class="progressbar" data-width="80%"></div>
<p>&nbsp;</p>
<p><strong class="plabel">Design</strong><span class="progress-label index-1"></span>

</p>
<div class="progressbar" data-width="40%"></div>
<p>&nbsp;</p>

CSS

p {
    font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif;
    line-height:20px;
}
.progressbar {
    height: 20px;
    border: none;
    position: relative;
}
.ui-corner-left {
    background: #333 !important;
    border: none;
    height: 1px;
}
.ui-corner-left {
    background: #333 !important;
    border: none;
    height: 1px;
}
.progress-label {
    display: inline-block;
    background-color:#e65a47;
    color: white;
    font-weight: bold;
    font-size: 11px;
    width: 30px;
    height: 25px;
    padding-top: 5px;
    text-align: center;
    border-radius: 100%;
    margin-left: 15px;
    vertical-align: middle;
}
.bigfont {
    font-size: 16px;
    padding-top:0px;
    padding-left: 0px;
}
.finished {
    text-decoration: line-through;
}

JavaScript

$(function () {
    $(".progressbar").each(function (index, item) {
        var w = $(item).data('width');
        $(item).progressbar({
            value: 1
        });
        $(".ui-progressbar-value", $(item)).animate({
            width: w
        }, {
            duration: 2500,
            step: function (width) {
                $('.index-'+index).text(width.toFixed(0) + "%");
                if ($('.progress').text() == "100%") {
                    $('.progress').text("√");
                    $('.progress').addClass("bigfont");
                    $('.plabel').addClass("finished");
                }
            }
        });
    });
});