JQuery multicolor progress bar

This is not so much a question as information that I want to share in the hope that it can help others with jQuery progress bars.

I was recently asked to create a progress bar that displays the number of days remaining in a given quarter of the year for when to review the training. The bar should be multi-colored (green, yellow, red) and the bar only appeared during the second month of the quarter and remained until the 16th of the third month in the quarter.

Sometimes it can be a simple request that can hurt us in development.

This is a screenshot of the final results using jQuery, javascript, html and css

You can find a working copy of the jsFiddle Example page

            (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);

      

        
        
        
      

    

I've added a jQuery datepicker to the example so that you can easily change the date to observe the behavior of the progress bars.

Hope this can help anyone else who may be struggling with the progress bar