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.

SeinopSys · Accepted Answer · 2015-06-30 10:55:45Z

4

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);

answered Jun 30, 2015 at 10:55

SeinopSys

8,93810 gold badges67 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas · Accepted Answer · 2015-06-30 11:43:15Z

-2

this way you can also do it.

$( 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 progress bar randomly whose value will be between 1 to 100

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

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

edited Jun 30, 2015 at 11:43

answered Jun 30, 2015 at 11:34

Thomas

34.3k130 gold badges374 silver badges646 bronze badges

Collectives™ on Stack Overflow

HTML, CSS & JS Animate Multiple Progress bars

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related