title: jQuery multi-colored progress bar
body: <p>This is not so much a question rather than information I wish to share in the hopes that it may help others with jQuery progress bars.  </p>
  
  <p>I was recently asked to create a progress bar that would display the number of days left in a given quarter of the year for when  a training review needed to be completed in.   The bar needed to be multi-colored (green, yellow, red) and the bar would only appear during the 2nd month of the quarter and remain until the 16th day of the 3rd month in the quarter.</p>
  
  <p>Sometimes it can be the simple request that can cause us the most pain in development.   </p>
  
  <p><img src="https://i.stack.imgur.com/gZMSB.jpg" alt="enter image description here"></p>
  
  <p>This is a screenshot of the end results using jQuery, javascript, html and css</p>
  
  <p>You can find a working copy of the page at <a href="http://jsfiddle.net/juvap9mj/" rel="nofollow noreferrer">jsFiddle Example</a></p>
  
  <pre><code>            (function ($) {
              $.fn.animateProgress = function (progress, callback) {
                  return this.each(function () {
                      $(this).animate({
                          width: 100 - progress + '%',
                          left: progress + '%'
                      }, {
                          duration: 1000,
                          easing: 'swing',
                          step: function (progress) {
                              var labelEl = $('.ui-label', this),
                                  valueEl = $('.value', labelEl);
                          },
                          complete: function (scope, i, elem) {
                              if (callback) {
                                  callback.call(this, i, elem);
                              };
                          }
                      });
                  });
              };
          })(jQuery);
  </code></pre>
  
  <p>I did add a jQuery datepicker to the example so that you can easily change the date to observe the progress bars behavior. </p>
  
  <p>Hopefully this may help anyone other there that may be struggling with a progress bar</p>