jQuery multi-colored progress bar

Question

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.

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.

Sometimes it can be the simple request that can cause us the most pain in development.

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

You can find a working copy of the page at jsFiddle Example

            (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 did add a jQuery datepicker to the example so that you can easily change the date to observe the progress bars behavior.

Hopefully this may help anyone other there that may be struggling with a progress bar