circular_meter.js

(function($) {
    $.fn.circularMeter = function() {
        var defaults = {
            dimension: 25,
            'border-width': 25,
            color: '#ABABAB',
            'text-color': '#000',
            'z-index': 99
        };
        var userOptions = typeof arguments[0] === 'object' ? [].shift.apply(arguments) : defaults;
        var opt = $.extend(true, defaults, userOptions);

        opt['font-size'] = (opt.dimension/3)+'px';
        var wrapper = $('<div></div>').css({
            height: opt.dimension,
            width: opt.dimension
        });

        var circle = $('<div></div>').css({
            position: 'absolute',
            height: 0,
            overflow: 'hidden'
        });
        var inner = $('<div></div>').css({
            width: opt.dimension,
            height: opt.dimension,
            'border-width': opt['border-width'],
            'border-color': opt.color,
            'border-style': 'solid',
            'border-radius': '360px'
        });
        var borderwidth = opt['border-width'];
        var dims = opt.dimension+2*borderwidth;
        var text = $('<div></div>').css({
            'line-height': dims+'px',
            width: dims,
            'text-align': 'center',
            'color': opt['text-color'],
            'font-size': opt['font-size']
        });
        wrapper.append(circle.append(inner)).append(text);
        wrapper.setProgress = function(percent) { 
            var completed = (percent/100)*(inner.height() + (2*parseInt(borderwidth)));
            text.html(percent+'%');
            circle.height(completed);
            return this;
        };

        $(this).append(wrapper);

        return wrapper;
    };
})(jQuery);
//http://jsfiddle.net/mvbe4anm/4/.