progressbar.js

/* JavaScript progress bar
 *
 * Reads the percentage value from the content of an element and
 * replaces it with a progress bar.
 *
 * Example:
 *
 * <span class="progress">100 %</span>
 * <script>
 *   $('.progress').progressbar();
 * </script>
 */

(function($) {
    $.fn.progressbar = function(options) {
        var defaults = {
            color: '#07f'
        };
        options = $.extend({}, defaults, options);

        this.each(function() {
            var text = $(this).html().replace('%', '').replace(/\s+/g, ''),
                progress = parseFloat(text) / 10 | 0,
                span = '<span>&nbsp;&nbsp;</span> ',
                content = new Array(11).join(span);

            $(this).html(content)
                .find(':lt(' + progress + ')')
                .css('background-color', options.color);
        });
    };
})(jQuery);