HTML, CSS & JS Animate Multiple Progress bars

Question

So I'm trying to animate multiple progress bars on one page, here is the HTML for my progress bars:

<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 am also using this code in my CSS Styling

.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'd like to animate each bar with a different value.

Answer 1

You can target the individual bars using .eq() which takes an index as a parameter to specify which bar you want.

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

From here, just call the animate method on the selected element. Storing the initial $(".progress-bar") call is also considered good practice.

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