I want to do a bar chart animated, but I would like for the bars to animate from left to right. As of right now, they all go at the same time

Here’s the example:

<div id="chart">  
  <ul id="bars">
    <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li><div data-percentage="23" class="bar"></div><span>Option 5</span>
    </li>
  </ul>
</div>

$(function() {
  $("#bars li .bar").each( function(  ) {
    var percentage = $(this).data('percentage');
    
    $(this).animate({
      'height' : percentage + '%'
    }, 1000);
  });
});

Here’s the fiddle: https://jsfiddle.net/o5ygn1w4/2/

Would this be possible with this example?

Source: Ask Javascript Questions