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

<div >
<p>Progress bar1</p>
  <div >
 <div  style="width: 50%;"></div>
 </div>
 <p>Progress bar2</p>
 <div >
 <div  style="width: 20%;"></div>
 </div>
 <p>Progress bar3</p>
 <div >
 <div  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

CodePudding user response：

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

CodePudding user response：

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

<div >
  <div  style="width: 50%;"> 50 </div>
</div>