add animation to fill progress bar

Question

How can i update it to fill progress bar with animation?

https://jsfiddle.net/dfkLexuv/2/

 .progress-bar-outer { width: 300px; height: 40px; flex: auto; display: flex; flex-direction: row; border-radius: 0.5em; overflow: hidden; background-color: gray; } .progress-bar-inner { /* You can change the `width` to change the amount of progress. */ width: 75%; height: 100%; background-color: red; } .progress-bar-inner2 { /* You can change the `width` to change the amount of progress. */ width: 50%; height: 100%; background-color: green; } 

 <div class="progress-bar-outer"> <div class="progress-bar-inner"> </div> <div class="progress-bar-inner2"> </div> </div> 

Answer 1

This is how I would do it https://jsfiddle.net/f1ajv0Lv/5/

You would then need to add JS to update the scaleX style as the progress changes:

$progressBar.css('transform', 'scaleX(' + percentageCompleteFromZeroToOne + ')');

Note that I added some additional attributes for better accessibility:

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

Answer 2

A small, basic, demo of how to use JavaScript to animate a progress bar :

 var $progressBarOuter = $('.progress-bar-outer'); var $progressBar = $('.progress-bar-inner'); setTimeout(function() { $progressBar.css('width', '10%'); setTimeout(function() { $progressBar.css('width', '30%'); setTimeout(function() { $progressBar.css('width', '100%'); setTimeout(function() { $progressBarOuter.css('display', 'none'); console.log('LOADING COMPLETE'); }, 500); // WAIT 5 milliseconds }, 2000); // WAIT 2 seconds }, 1000); // WAIT 1 seconds }, 1000); // WAIT 1 second 

 .progress-bar-outer { width: 300px; height: 40px; flex: auto; display: flex; flex-direction: row; border-radius: 0.5em; overflow: hidden; background-color: red; } .progress-bar-inner { height: 100%; background-color: green; } 

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <div class="progress-bar-outer"> <div class="progress-bar-inner"> </div> </div> 

Answer 3

Give this guy a shot!

add this to your head tag.

<script src="jquery-3.2.1.min.js"></script>

then add some js.

 $(document).ready(function(){
  $( ".progress-bar-inner" ).animate({
    width:"100%"
  }, 5000);

  $( ".progress-bar-inner2" ).animate({
        width:0
   }, 5000);

});

I modified the css a bit also.

.progress-bar-outer {
  width: 300px;
  height: 40px;
  flex: auto;
  display: flex;
  flex-direction: row;
  border-radius: 0.5em;
  overflow: hidden;
  background-color: gray;
}
.progress-bar-inner {
  /* You can change the `width` to change the amount of progress. */
  width: 10%;
  height: 100%;
  background-color: red;
}
.progress-bar-inner2 {
  /* You can change the `width` to change the amount of progress. */
  width: 90%;
  height: 100%;
  background-color: green;
}