title: Load a Javascript progress bar after scrolling down to it
body: <p>I have used jQuery 1.12.2 with animate.css which populates a progress bar successfully. Now I.m trying to only make the progress bar load after I scroll down to it as is currently loads straight away. What's the point in having this awesome feature when it has already been loaded when it is somewhere down the bottom of the page?</p>
  
  <p>I have created a JSFiddle <a href="https://jsfiddle.net/4azoyq1j/1/" rel="nofollow">here</a>. I know the JavaScript is a little messy and can be written in a more cleaner way but please excuse me as I am new to JS and trying to make this work first. Can anyone help?</p>
  
  <pre><code>$('#myid').goalProgress({
          goalAmount: 100,
          currentAmount: 75,
          textBefore: 'myid ',
          textAfter: ''
      });
  });
  </code></pre>
  
  <p>goalProgress is a whole different class:</p>
  
  <pre><code>!function($){
  $.fn.extend({
      goalProgress: function(options) {
          var defaults = {
              goalAmount: 100,
              currentAmount: 50,
              speed: 1000,
              textBefore: '',
              textAfter: '',
              milestoneNumber: 70,
              milestoneClass: 'almost-full',
              callback: function() {}
          }
  
          var options = $.extend(defaults, options);
          return this.each(function(){
              var obj = $(this);
  
              // Collect and sanitize user input
              var goalAmountParsed = parseInt(defaults.goalAmount);
              var currentAmountParsed = parseInt(defaults.currentAmount);
  
              // Calculate size of the progress bar
              var percentage = (currentAmountParsed / goalAmountParsed) * 100;
  
              var milestoneNumberClass = (percentage &gt; defaults.milestoneNumber) ? ' ' + defaults.milestoneClass : ''
  
              // Generate the HTML
              var progressBar = '&lt;div class="progressBar"&gt;' + defaults.textBefore + defaults.textAfter + '&lt;/div&gt;';
  
              var progressBarWrapped = '&lt;div class="goalProgress' + milestoneNumberClass + '"&gt;' + progressBar + '&lt;/div&gt;';
  
              // Append to the target
              obj.append(progressBarWrapped);
  
              // Ready
              var rendered = obj.find('div.progressBar');
  
              // Remove Spaces
              rendered.each(function() {
                  $(this).html($(this).text().replace(/\s/g, '&amp;nbsp;'));
              });
  
              // Animate!
              rendered.animate({width: percentage +'%'}, defaults.speed, defaults.callback);
  
              if(typeof callback == 'function') {
                  callback.call(this)
              }
          });
      }
  });
  }(window.jQuery);
  </code></pre>