title: Chain together multiple jQuery animations to progressively animate color
body: <h2>Background</h2>
  
  <p>I am creating a progress bar with steps that animates as more steps are completed (wizard style where after each successive ajax request finishes it goes to the next step). A good example of the look I'm going for is Amazon's shipping tracking, pictured below.</p>
  
  <p><img src="https://i.stack.imgur.com/BrCMA.png" alt="enter image description here">
  I looked for plugins to do this, but I couldn't find one where I could add in the little circle steps like the image above, so I am creating my own with jQuery.</p>
  
  <h2>Issue &amp; Question</h2>
  
  <p>Currently the "best" way I can think to accomplish this is by chaining together multiple <code>.animate()</code> methods which apply a <code>background-color</code> to one after another DIVs in a row. My jQuery code looks like this:</p>
  
  <pre><code>$(function () {
  
      $(".progress-square:lt(1)").animate({
          backgroundColor: "#FABF03"
      }, 500, function () {
          $(".progress-square:lt(2)").animate({
              backgroundColor: "#FABF03"
          }, 500, function () {
              $(".progress-square:lt(3)").animate({
                  backgroundColor: "#FABF03"
              }, 500);
          });
      });
  
  });
  </code></pre>
  
  <p>and my HTML is rather simple:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="progress-bar-wrapper"&gt;
          &lt;!--&lt;div class="circle"&gt;put circle here&lt;/div&gt;--&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;!--&lt;div class="circle"&gt;put circle here&lt;/div&gt;--&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;div class="progress-square"&gt;&lt;/div&gt;
          &lt;!--&lt;div class="circle"&gt;put circle here&lt;/div&gt;--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am wondering if this is the correct way to "chain together" multiple <code>animate()</code> methods to successively animate one DIV after another? I seem to be having issues with my 4th <code>animate()</code> call using <code>:lt(4)</code> because the 4th <code>div</code> does not animate. I did not include this bit in the fiddle. </p>
  
  <p>Or is there possibly a "shortcut" provided by jQuery or another plugin that helps with a case like this?</p>
  
  <p>Currently in my fiddle i am using jQuery and <a href="https://github.com/jquery/jquery-color/" rel="nofollow noreferrer">jQuery Color</a> as well as Bootstrap is included to stay consistent with the project I am working on.</p>
  
  <p>Here is a <strong><a href="https://jsfiddle.net/jamez14/wkwg4obe/2/" rel="nofollow noreferrer">fiddle</a></strong>.</p>