how to display the percentage of progress bar

June 10, 2022

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

>Solution :

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