如何使进度条百分比居中

Question

My problem is the percent 100% is not exactly in the center. I tried spacing it in the JavaScript, but it's not working.

Current output: http://jsfiddle.net/GZSH6/53/

JavaScript:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 550) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 55);
    }
    $bar.text($bar.width() / 5.5 + "%  ");
}, 800);

Answer 1

Take a look at this DEMO

jQuery

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 520) {
        clearInterval(progress);
        $('.progress').removeClass('active');
        $bar.text("100%");        
    } else {
        $bar.width($bar.width() + 50);
        $bar.text($bar.width() / 5 + "%");
    }

}, 800);

CSS

.bar{
   max-width:520px;    
}

Answer 2

<div style="width: 590px;text-align:left;text-indent:202px" class="bar">107.27272727272727%</div>