Demo page

barIndicator/jquery-barIndicator.js

@@ -238,6 +238,7 @@
 					that: that,
 					target: num
 				}
+
 				if (event == 'load') {
 					$(window).load(function() {
 						Plugin.prototype._animateBar.apply(this, [paramsAnim]);
@@ -277,12 +278,13 @@
 					var lbNum = num;
 					var min = opt.numMin;
 					var max = opt.numMax;
-					var barLength = num / (max - min) + '%';
+					var barLength = (num / (max - min)) * 100 + '%';
 				}
 				var lengthObj = {
 					lbNum: lbNum,
 					barLength: barLength
 				};
+
 				return lengthObj;
 			}
 		},
@@ -371,10 +373,11 @@
 				var countTime = opt.animTime;
 				var decim = opt.lbDecimals;
 				var step = opt.counterStep;
+				var type = opt.numType; 
 
-				if (opt.numType == 'percent') {
+				if (type == 'percent') {
 					var sign = '%';
-				} else if (type == 'absolute') {
+				} else if (type == 'absolute') {					
 					var sign = '';
 				}
 				var i = parseFloat(min);
@@ -831,11 +834,5 @@
 			Plugin.prototype._setAvgMilestone.apply(this, [paramsAvg]);
 		});
 	});
-
-	//TODO ------------------------------------------------------------------------------------------------------ //
-	// 1) Milestones --> OK
-	// 2) Average (milestones) of groups etc --> TODO option: getAverage
-	// 3) Reanimate bar via new method --> OK
-	// 4) Title (already added data-title) --> OK
-
+
 })(jQuery, window, document);

css/style.css

@@ -101,6 +101,24 @@ h3.sectionHeader {
 
 .testBar { margin-bottom:10px }
 
+.secInner-comments {
+	padding:10px;
+	background-color:#f4f4f4;
+	margin-bottom:20px;
+	font-weight:100;
+}
+.secInner-btn button {
+	border:none;
+	background-color:#61a8d8;
+	padding: 5px 10px;
+	font-size:1.1em;
+	font-family: 'Open Sans', sans-serif;
+	font-weight:100;
+	cursor:pointer;
+	color:#fff;
+}
+.secInner-btn button:hover { background-color:#3498db }
+
 footer {
 	position:relative;
 	margin-top:30px;