jQuery多色进度条

Question

这不是一个问题，而是我希望分享的信息，希望它可以帮助其他人使用jQuery进度条。

我最近被要求创建一个进度条，显示一年中某个季度剩余的天数，以便在需要完成培训审核时。条形图需要是多色的（绿色，黄色） ，红色）和酒吧只会出现在季度的第二个月，并保持到第三个月的第16个月的第16天。

有时它可能是一个简单的请求，可能会导致我们最痛苦的发展。

这是使用jQuery，javascript，html和css

的最终结果的屏幕截图

您可以在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);

我确实在示例中添加了一个jQuery datepicker，以便您可以轻松更改日期以观察进度条的行为。

希望这可能会帮助那些可能正在努力应对进度条的其他人