diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js
index eaaae93..6e6b926 100644
--- a/html_javascript/circular-progress.js
+++ b/html_javascript/circular-progress.js
@@ -3,12 +3,18 @@
  * @Desc: Shows progress bar.
  * @Params: _upto -> upto that percentage.
  */
-function __showProgress(_upto, _cir_progress_id) {
+
+window.onload = init;
+
+function __showProgress(_from, _upto, _cir_progress_id) {
 
     //Filter Percentage
     _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto);
 
-    var _progress = 0;
+    //Filter Percentage
+    _from = (_from > 100) ? 100 : ((_from < 0) ? 0 : _from);
+
+    var _progress = _from;
 
     var _cir_progress = document.getElementById(_cir_progress_id).getElementsByClassName("_cir_P_y")[0];
     var _text_percentage = document.getElementById(_cir_progress_id).getElementsByClassName("_cir_Per")[0];
@@ -35,5 +41,22 @@ function __showProgress(_upto, _cir_progress_id) {
             _cir_progress.style.strokeDasharray = _percentage + ', 1000';
         }
     }
+
+}
+
+function _initializeCircle(elem){
+  console.log("setting level to given percentage...");
+      var _cir_progress = elem.getElementsByClassName("_cir_P_y")[0];
+      var _text_percentage = elem.getElementsByClassName("_cir_Per")[0].innerHTML.slice(0,-1);
+      var _percentage = (parseInt(_text_percentage) / 100 ) * 382;
+      _cir_progress.style.strokeDasharray = _percentage + ', 1000';
+}
+
+function init(){
+  var progressMeters = document.getElementsByTagName("svg");
+  for(var i = 0; i < progressMeters.length; i++){
+    _initializeCircle(progressMeters[i]);
+
+  }
 }
 
diff --git a/html_javascript/index.html b/html_javascript/index.html
index 6d13a41..7582e6a 100644
--- a/html_javascript/index.html
+++ b/html_javascript/index.html
@@ -14,12 +14,20 @@
             <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
             <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
         </svg>
-        <button onclick="__showProgress(60,'_cir_progress_1')">Show 60%</button>
+        <button onclick="__showProgress(0,60,'_cir_progress_1')">Show 60%</button>
         <svg height="200" width="200" id="_cir_progress_2">
             <circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
             <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
             <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
         </svg>
-        <button onclick="__showProgress(30, '_cir_progress_2')">Show 30%</button>
+        <button onclick="__showProgress(0,30, '_cir_progress_2')">Show 30%</button>
+        <svg height="200" width="200" id="_cir_progress_3">
+            <circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
+            <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025"
+            stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
+            <text x="50%" y="50%" text-anchor="middle" stroke="none"
+            stroke-width="1px" dy=".3em" class="_cir_Per">30%</text>
+        </svg>
+        <button onclick="__showProgress(30,60, '_cir_progress_3')">Show 30% &rArr; 60%</button>
     </body>
 </html>