Merge pull request #131 from howard60915/issue/106

Issue/106

README.md

@@ -64,6 +64,7 @@ Options
 | percent     | can be 1 to 100 | integer | 75 |
 | animation     | if the circle should be animated initially | int | 1 |
 | animationStep     | can be 1 to 100, how fast or slow the animation should be | int | 5 |
+| progressColor    | change color of foreground circle as percents changed（{ 50: '#FF6C00', 60: '#FF6C00'}） | {integer:RGB} | null |
 | icon     | font awesome icon, details bellow | string | none |
 | iconSize     | font size of the icon | integer | 30 |
 | iconColor     | color of the icon | RGB | #ccc |

js/jquery.circliful.js

@@ -46,7 +46,8 @@
 			decimals: 0,
 			alwaysDecimals: false,
 			title: 'Circle Chart',
-			description: ''
+			description: '',
+			progressColor: null
 		}, options);
 
 		return this.each(function () {
@@ -63,6 +64,7 @@
 			var elements;
 			var icon;
 			var backgroundBorderWidth = settings.backgroundBorderWidth;
+			var progressColor = settings.progressColor
 
 			if (settings.halfCircle) {
 				if (settings.iconPosition == 'left') {
@@ -271,6 +273,17 @@
 							.find('.percent')
 							.text('');
 					}
+
+					if (progressColor != null) {
+						$.each(progressColor, function(key, value){
+							if ( angle >= key * 3.6) {
+								circle.css({
+									stroke: value,
+									transition: 'stroke 0.1s linear'
+								});
+							}
+						});
+					}
 				}.bind(circle), interval);
 			}