├── bower.json
├── README.md
├── css
└── circle.css
└── progress-circle.js
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "progress-circle",
3 | "main": "progress-circle.js",
4 | "version": "1.0.0",
5 | "homepage": "https://github.com/iammary/progress-circle",
6 | "authors": [
7 | "Jes Anub"
8 | ],
9 | "description": "A jQuery plugin that creates a percentage circle based on pure CSS.",
10 | "keywords": [
11 | "jquery",
12 | "plugin",
13 | "css",
14 | "percentage",
15 | "circle"
16 | ],
17 | "license": "MIT",
18 | "ignore": [
19 | "**/.*",
20 | "node_modules",
21 | "bower_components",
22 | "public/js/libs",
23 | "test",
24 | "tests"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Progress Circle
2 | ===============
3 |
4 | A jQuery plugin that creates a percentage circle based on pure CSS.
5 |
6 | ### Demo
7 |
8 | http://iammary.github.io/progress-circle/
9 |
10 | ### How to use
11 |
12 | 1. Prepare the markup holder
13 |
14 | ```HTML
15 |
16 | ```
17 |
18 | 2. Invoke the progressCircle() function
19 |
20 | ```JavaScript
21 | $( '#circle' ).progressCircle();
22 | ```
23 |
24 | ### Additional Settings
25 |
26 | Below is an example of the code with all available options and their defaults:
27 |
28 | ```JavaScript
29 | $( '#circle' ).progressCircle({
30 | nPercent : 50,
31 | showPercentText : true,
32 | thickness : 3,
33 | circleSize : 100
34 | });
35 | ```
36 |
37 | ### Code Reference
38 |
39 | Checkout development branch at https://github.com/iammary/progress-circle/tree/dev
40 |
41 |
--------------------------------------------------------------------------------
/css/circle.css:
--------------------------------------------------------------------------------
1 | /****************************************************************
2 | *
3 | * CSS Percentage Circle
4 | * Based on CSS provided by Andre Firchow
5 | *
6 | *****************************************************************/
7 |
8 | .prog-circle .slice {
9 | position : absolute;
10 | width : 1em;
11 | height : 1em;
12 | clip : rect(0em, 1em, 1em, 0.5em);
13 | }
14 | .prog-circle .slice.clipauto {
15 | clip : rect(auto, auto, auto, auto);
16 | }
17 | .prog-circle .fill, .prog-circle .bar {
18 | position : absolute;
19 | border : 0.08em solid #90c844;
20 | width : 0.84em;
21 | height : 0.84em;
22 | clip : rect(0em, .5em, 1em, 0em);
23 | -webkit-border-radius : 50%;
24 | -moz-border-radius : 50%;
25 | -ms-border-radius : 50%;
26 | -o-border-radius : 50%;
27 | border-radius : 50%;
28 | -webkit-transform : rotate(20deg);
29 | -moz-transform : rotate(20deg);
30 | -ms-transform : rotate(20deg);
31 | -o-transform : rotate(20deg);
32 | transform : rotate(20deg);
33 | }
34 | .prog-circle {
35 | position : relative;
36 | font-size : 120px;
37 | width : 1em;
38 | height : 1em;
39 | -webkit-border-radius : 50%;
40 | -moz-border-radius : 50%;
41 | -ms-border-radius : 50%;
42 | -o-border-radius : 50%;
43 | border-radius : 50%;
44 | float : left;
45 | margin : 0 0.1em 0.1em 0;
46 | background-color : #e6f2b6;
47 | }
48 | .prog-circle .percenttext {
49 | position : absolute;
50 | width : 100%;
51 | height : 1em;
52 | z-index : 1;
53 | margin : auto;
54 | top : 0;
55 | left : 0;
56 | right : 0;
57 | bottom : 0;
58 | font-size : 0.3em;
59 | color : #90c844;
60 | display : block;
61 | text-align : center;
62 | white-space : nowrap;
63 | line-height : 100%;
64 | -webkit-transition-duration : 0.2s;
65 | -moz-transition-duration : 0.2s;
66 | -o-transition-duration : 0.2s;
67 | transition-duration : 0.2s;
68 | -webkit-transition-timing-function : ease-out;
69 | -moz-transition-timing-function : ease-out;
70 | -o-transition-timing-function : ease-out;
71 | transition-timing-function : ease-out;
72 | }
73 | .prog-circle .after {
74 | position : absolute;
75 | top : 0.08em;
76 | left : 0.08em;
77 | display : block;
78 | content : " ";
79 | -webkit-border-radius : 50%;
80 | -moz-border-radius : 50%;
81 | -ms-border-radius : 50%;
82 | -o-border-radius : 50%;
83 | border-radius : 50%;
84 | background-color : #FFFFFF;
85 | width : 0.84em;
86 | height : 0.84em;
87 | }
--------------------------------------------------------------------------------
/progress-circle.js:
--------------------------------------------------------------------------------
1 | /**************************************************************
2 | *
3 | * Progress Circle 1.1.0
4 | * Updated support for bootstrap
5 | *
6 | **************************************************************/
7 |
8 | ( function( $ ){
9 | var ProgressCircle = function( element, options ){
10 |
11 | var settings = $.extend( {}, $.fn.progressCircle.defaults, options );
12 | var thicknessConstant = 0.02;
13 | var nRadian = 0;
14 |
15 | computePercent();
16 | setThickness();
17 |
18 | var border = ( settings.thickness * thicknessConstant ) + 'em';
19 | var offset = ( 1 - thicknessConstant * settings.thickness * 2 ) + 'em';
20 | var circle = $( element );
21 | var progCirc = circle.find( '.prog-circle' );
22 | var circleDiv = progCirc.find( '.bar' );
23 | var circleSpan = progCirc.children( '.percenttext' );
24 | var circleFill = progCirc.find( '.fill' );
25 | var circleSlice = progCirc.find( '.slice' );
26 |
27 | if ( settings.nPercent == 0 ) {
28 | circleSlice.hide();
29 | } else {
30 | resetCircle();
31 | transformCircle( nRadians, circleDiv );
32 | }
33 | setBorderThickness();
34 | updatePercentage();
35 | setCircleSize();
36 |
37 | function computePercent () {
38 | settings.nPercent > 100 || settings.nPercent < 0 ? settings.nPercent = 0 : settings.nPercent;
39 | nRadians = ( 360 * settings.nPercent ) / 100;
40 | }
41 |
42 | function setThickness () {
43 | if ( settings.thickness > 10 ) {
44 | settings.thickness = 10;
45 | } else if ( settings.thickness < 1 ) {
46 | settings.thickness = 1;
47 | } else {
48 | settings.thickness = Math.round( settings.thickness );
49 | }
50 | }
51 |
52 | function setCircleSize ( ) {
53 | progCirc.css( 'font-size', settings.circleSize + 'px' );
54 | }
55 |
56 | function transformCircle ( nRadians, cDiv ) {
57 | var rotate = "rotate(" + nRadians + "deg)";
58 | cDiv.css({
59 | "-webkit-transform" : rotate,
60 | "-moz-transform" : rotate,
61 | "-ms-transform" : rotate,
62 | "-o-transform" : rotate,
63 | "transform" : rotate
64 | });
65 | if( nRadians > 180 ) {
66 | transformCircle( 180, circleFill );
67 | circleSlice.addClass( ' clipauto ');
68 | }
69 | }
70 |
71 | function setBorderThickness () {
72 | progCirc.find(' .slice > div ').css({
73 | 'border-width' : border,
74 | 'width' : offset,
75 | 'height' : offset
76 | })
77 | if( settings.barOverride ) {
78 | progCirc.find(' .slice > div.bar ').css({
79 | 'width' : '1em',
80 | 'height' : '1em'
81 | })
82 | }
83 | progCirc.find('.after').css({
84 | 'top' : border,
85 | 'left' : border,
86 | 'width' : offset,
87 | 'height' : offset
88 | })
89 | }
90 |
91 | function resetCircle () {
92 | circleSlice.show();
93 | circleSpan.text( '' );
94 | circleSlice.removeClass( 'clipauto' )
95 | transformCircle( 20, circleDiv );
96 | transformCircle( 20, circleFill );
97 | return this;
98 | }
99 |
100 | function updatePercentage () {
101 | settings.showPercentText && circleSpan.text( settings.nPercent + '%' );
102 | }
103 | };
104 |
105 | $.fn.progressCircle = function( options ) {
106 | return this.each( function( key, value ){
107 | var element = $( this );
108 | if ( element.data( 'progressCircle' ) ) {
109 | var progressCircle = new ProgressCircle( this, options );
110 | return element.data( 'progressCircle' );
111 | }
112 | $( this ).append( '' +
113 | '
' +
114 | '
' +
115 | '
' +
116 | '
' +
117 | '
' +
118 | '
' +
119 | '