title: How to animate bootstrap progress bar only on scroll with javascript / jquery?
body: <p>I want to animate the bootstrap progress bar on scroll (also every time you scroll the animation should restart). Ive looked up solutions on stackoverflow, but when I apply them, nothing works, so the progress bar still 'moves' not on scroll but on page load. I would like to just do it with js/jquery and keyframes and without any library. If anyone has a tip, that would be great. Thanks!</p>
  
  <pre><code>https://jsfiddle.net/hdxv4hrp/
  </code></pre>
  
  <p>code:
  html:</p>
  
  <pre><code>&lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;div style="width: 400px; margin: 50px auto"&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%"&gt;
              &lt;span class="title"&gt;60%&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="width: 400px; margin: 50px auto"&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 10%"&gt;
              &lt;span class="title"&gt;20%&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="width: 400px; margin: 50px auto"&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%"&gt;
              &lt;span class="title"&gt;90%&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.progress-bar {
      width: 0;
      animation: progress 1.5s ease-in-out forwards;
      .title {
          opacity: 0;
          animation: show 0.35s forwards ease-in-out 0.5s;
      }
  }
  @keyframes progress {
      from {
          width: 0;
      }
      to {
          width: 100%;
      }
  }
  @keyframes show {
      from {
          opacity: 0;
      }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$(window).scroll(function() {
      if ($(window).scrollTop() &gt; 0) {
          progress-bar.addClass("show");
      } else {
          progress-bar.removeClass("show");
      }
  });
  </code></pre>