CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
user3671584
user3671584

Reputation: 339

How to make the progress bar percent centered

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/

enter image description here

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);

Upvotes: 0

Views: 145

Answers (2)

W.D.
W.D.

Reputation: 1041

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;    
}

Upvotes: 2

Kisspa
Kisspa

Reputation: 584

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

Upvotes: -1

Related Questions