/************************************************************** * * Progress Circle 1.0 * **************************************************************/ ( function( $ ){ var ProgressCircle = function( element, options ){ var settings = $.extend( {}, $.fn.progressCircle.defaults, options ); var thicknessConstant = 0.02; var nRadian = 0; computePercent(); setThickness(); var border = ( settings.thickness * thicknessConstant ) + 'em'; var offset = ( 1 - thicknessConstant * settings.thickness * 2 ) + 'em'; var circle = $( element ); var progCirc = circle.find( '.prog-circle' ); var circleDiv = progCirc.find( '.bar' ); var circleSpan = progCirc.children( '.percenttext' ); var circleFill = progCirc.find( '.fill' ); var circleSlice = progCirc.find( '.slice' ); if ( settings.nPercent == 0 ) { circleSlice.hide(); } else { resetCircle(); transformCircle( nRadians, circleDiv ); } setBorderThickness(); updatePercentage(); setCircleSize(); function computePercent () { settings.nPercent > 100 || settings.nPercent < 0 ? settings.nPercent = 0 : settings.nPercent; nRadians = ( 360 * settings.nPercent ) / 100; } function setThickness () { if ( settings.thickness > 10 ) { settings.thickness = 10; } else if ( settings.thickness < 1 ) { settings.thickness = 1; } else { settings.thickness = Math.round( settings.thickness ); } } function setCircleSize ( ) { progCirc.css( 'font-size', settings.circleSize + 'px' ); } function transformCircle ( nRadians, cDiv ) { var rotate = "rotate(" + nRadians + "deg)"; cDiv.css({ "-webkit-transform" : rotate, "-moz-transform" : rotate, "-ms-transform" : rotate, "-o-transform" : rotate, "transform" : rotate }); if( nRadians > 180 ) { transformCircle( 180, circleFill ); circleSlice.addClass( ' clipauto '); } } function setBorderThickness () { progCirc.find(' .slice > div ').css({ 'border-width' : border, 'width' : offset, 'height' : offset }) progCirc.find('.after').css({ 'top' : border, 'left' : border, 'width' : offset, 'height' : offset }) } function resetCircle () { circleSlice.show(); circleSpan.text( '' ); circleSlice.removeClass( 'clipauto' ) transformCircle( 20, circleDiv ); transformCircle( 20, circleFill ); return this; } function updatePercentage () { settings.showPercentText && circleSpan.text( settings.nPercent + '%' ); } }; $.fn.progressCircle = function( options ) { return this.each( function( key, value ){ var element = $( this ); if ( element.data( 'progressCircle' ) ) { var progressCircle = new ProgressCircle( this, options ); return element.data( 'progressCircle' ); } $( this ).append( '