how to display the percentage of progress bar

user_19311752 0
Viewed 546

So I'm trying to display the percentage of each bar on one page, here is the HTML for my progress bars:

<div class="col-md-5">
<p>Progress bar1</p>
  <div class="progress progress-striped active">
 <div class="progress-bar progress-bar-Success" style="width: 50%;"></div>
 </div>
 <p>Progress bar2</p>
 <div class="progress progress-striped active">
 <div class="progress-bar progress-bar-Success" style="width: 20%;"></div>
 </div>
 <p>Progress bar3</p>
 <div class="progress progress-striped active">
 <div class="progress-bar progress-bar-Success" style="width: 30%;"></div>
 </div>

and this is my js function

$(document).ready(function() {
 $(".progress-bar").each(function(index) {
//if(index >=0 && index<=1)
//{
$(this).animate({
  width: Math.floor((Math.random() * 100) + 1) + "%"
}, 2500);

//        }
})
});

using this i get all bars are automated generated, but i want to display the percentage of each bar, how i can do this ? This the fiddle

display progress-bar random html
2 Answers

As you using Bootstrap 3, you can add the percentage to the ".progress-bar" div:

Bootstrap docs

$( document ).ready(function() {
    $(".progress-bar").each(function (index ) {
        //if(index >=0 && index<=1)
        //{
            var percent = Math.floor((Math.random() * 100) + 1) + "%";
            $(this).html(percent);
            $(this).animate({width: percent}, 2500);
             
//        }
    })
});

Your jsfiddle extended

user_34811640

You can add the percentage text inside the div itself. Check the code below :

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-Success" style="width: 50%;"> 50 </div>
</div>
user_149887110
Related