2019-07-16
How to animate bootstrap progress bar once in view?
stackoverflow
Question

I am looking to animate bootstrap's progress bar once it's been scrolled to view, right now it animates as soon as page is loaded and once I scroll to the progress bar it's done animating.

HTML:

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="75">HTML</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="65">CSS</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20">JavaScript</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="25">WordPress</div>
</div>

CSS:

.progress .progress-bar.six-sec-ease-in-out {
-webkit-transition: width 6s ease-in-out;
-moz-transition: width 6s ease-in-out;
-ms-transition: width 6s ease-in-out;
-o-transition: width 6s ease-in-out;
transition: width 6s ease-in-out;

}

Answer
1

Try this https://jsfiddle.net/audLoLb0/1/

HTML

<div class="progress-element">
    <p>HTML</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="75"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>CSS</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="65"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>JavaScript</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="20"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>Wordpress</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="25"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
</div><!-- End of progress-element -->

CSS

.progress {
    height: 1px;
    background: none;
    box-shadow: none;
}

.progress-bar {
    background: black;
}

.progress-element {
    text-align: left;
}

JS

 $(".progress-element").each(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  });

Important

If you want bars to trigger when you enter viewport and i bet you do you have to use this http://imakewebthings.com/waypoints/

And just use this code

JS

/*---------------------------------------------- 
                PROGRESS BARS
------------------------------------------------*/
  $(".progress-element").each(function() {
      $(this).waypoint(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  }, {
      triggerOnce: true,
      offset: 'bottom-in-view'
    });
   });

Don't forget to include latest jquery before this

How to animate bootstrap progress bar once in view?
See more ...