A jQuery Progress Bar Plugin

Here is a simple progress indicator written as a jQuery plugin.  Useful for using with iterative asynchronous processes.

Simply create an element on the page (div) and call CSProg(total, msg) on it with the total no of actions  to complete and an optional message.

Each time an action completes call increment() to update the progress bar / message.

Complete by calling complete(msg) with an optional message.

The colour of the bar and message come from the container color and background-color CSS properties respectively.  These will contrast as the bar passes the message area.

JavaScript:

(function ($) {
    $.fn.CSProg = function (total, msg) {
        if (!$(this).height()) $(this).height(20);
        this.$progFrame = $(this).find('.cs-progFrame');
        var foreColour = $(this).css('color');
        var bkColour = $(this).css('background-color');
        if (bkColour == 'rgba(0, 0, 0, 0)' || bkColour == 'transparent') bkColour = '#fff';
        if (!this.$progFrame.length) this.$progFrame = $(document.createElement('div')).attr({
            'class': 'cs-progFrame'
        });
        this.$progFrame.attr({
            'data-total': total,
            'data-current': 0,
            'data-message': msg
        }).css({
            'text-align': 'center',
            'position': 'relative',
            'border': '1px solid ' + foreColour
        });
        $(this).append(this.$progFrame);

        this.$progFrameText = $(this).find('.cs-progFrameText');
        if (!this.$progFrameText.length) this.$progFrameText = $(document.createElement('div')).attr({
            'class': 'cs-progFrameText'
        }).css({
            'color': foreColour,
            'background-color': bkColour
        });
        this.$progFrame.append(this.$progFrameText);

        this.$progBar = $(this).find('.cs-progBar');
        if (!this.$progBar.length) this.$progBar = $(document.createElement('div')).attr({
            'class': 'cs-progBar'
        }).css({
            'position': 'absolute',
            'top': 0,
            'margin': 0,
            'color': bkColour,
            'background-color': foreColour,
            'overflow': 'hidden'
        });
        this.$progFrame.append(this.$progBar);

        this.$progBarContent = $(this).find('.cs-progBarContent');
        if (!this.$progBarContent.length) this.$progBarContent = $(document.createElement('div')).attr({
            'class': 'cs-progBarContent'
        });
        this.$progBar.append(this.$progBarContent);

        this.$progFrame.height($(this).height()).width($(this).width()).show();
        this.$progFrameText.height($(this).height()).width($(this).width()).css({
            'line-height': $(this).height() + 'px'
        }).show();
        this.$progBar.height($(this).height()).width(0);
        this.$progBarContent.height($(this).height()).width($(this).width()).css({
            'line-height': $(this).height() + 'px'
        });
    };

    $.fn.increment = function () {
        var total = parseInt(this.$progFrame.attr('data-total'));
        var current = parseInt(this.$progFrame.attr('data-current'));
        var message = this.$progFrame.attr('data-message');
        if (message)
            message = message + ': ';
        else
            message = '';
        message = message + (current + 1) + '/' + total;
        current++;
        if (this.$progBar && this.$progFrame && this.$progFrameText && this.$progBarContent) {
            this.$progBar.width((current / total) * this.$progFrame.width());
            this.$progFrame.attr({
                'data-current': current
            });
            this.$progFrameText.text(message);
            this.$progBarContent.text(message);
        }
    };

    $.fn.complete = function (msg) {
        if (this.$progBar && this.$progFrame && this.$progFrameText && this.$progBarContent) {
            msg = (typeof msg === 'undefined') ? '' : msg;
            this.$progBar.width(this.$progFrame.width());
            this.$progBarContent.text(msg);
            this.$progFrameText.text(msg);
        }
    };

}(jQuery));

Example:

<div id="cont"></div>

 

$('#cont').CSProg(10, 'Things happening');

function onUpdate(){
    $('#cont').increment();
}

function onComplete(){
    $('#cont').complete('Done');
}