HTML, CSS, and JS spice up multiple execution bars

Question

So, I am trying to animate several progress indicators on one page, here is the HTML for my progress indicators:

<div class="col-md-5"> <p>HTML & CSS</p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width: 50%;"></div> </div> <p>C#</p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width: 20%;"></div> </div> <p>WordPress</p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width: 30%;"></div> </div> <p>Photoshop</p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width: 20%;"></div> </div> </div> 

I also use this code in my CSS style

 .progress.active .progress-bar { -webkit-transition: none !important; transition: none !important; } 

And this is my JS function:

 $(".progress-bar").animate({width: "10%"}, 2500); 

Using this, all 4 bars are animated, but I would like to animate each panel with a different value.

Answer 1

You can target individual columns using .eq() , which takes an index as a parameter to indicate which bar you want.

 $(".progress-bar").eq(0); // First bar $(".progress-bar").eq(1); // Second bar 

Here, just call the animate method on the selected item. Saving the initial call to $(".progress-bar") also considered good practice.

 var $bars = $(".progress-bar"); $bars.eq(0).animate({width: "10%"}, 2500); $bars.eq(1).animate({width: "5%"}, 2500); 

Answer 2

that way you can do it too.

 $( document ).ready(function() { $(".progress-bar").each(function (index ) { if(index >=0 && index<=1) { $(this).animate({width: "5%"}, 2500); } }) }); 

http://jsfiddle.net/tridip/80cww0qr/

we can also increase the progress bar arbitrarily, the value of which will be from 1 to 100

 $(this).animate({width: Math.floor((Math.random() * 100) + 1) + "%"}, 2500); 

http://jsfiddle.net/tridip/80cww0qr/1/