<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/267514/glyphicons-halflings.css">
<div id="container">  
  <div class="progress-wrapper"></div>
</div>

<div class="controls">  
  <div><label>Steps</label> <input id="input_steps" value="6" type="text" /></div>
  <div><label>Progress</label> <input id="input_progress" value="1" type="text" /></div>
  <button id="update" type="button">Submit</button>  
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html, body,label,imput,span,a
{
  font-family: 'Open Sans', sans-serif;
}
html,body 
{  
  font-size:1vw;
  position:relative;  
}
#container
{  
  padding:1.5%;
  margin:0 auto;         
}
#container h1
{
  text-align:Center;
  font-family:verdana;
  color:#666;
  font-weight:100;
}
.progress-wrapper
{
  position:relative;
  height:1em;
  background-color: rgb(245, 245, 245);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;    
  color: rgb(51, 51, 51);
  display: block;
  
}
.progress-bar
{   
  position:absolute;
  height:100%;
  font-size:1em;  
  display: block;
  box-sizing: border-box;  
  float: left;  
  background-color: #66C2FF;     
  z-index:0;  
}
.steps-wrapper
{
  position:absolute;
  width:100%;
  height:100%;
  top:-1.5em;
}
ul.steps
{ 
  position:relative;
  float:left;
  width:100%;
  display:inline-block;      
  list-style-type:none;
  padding:0;
  margin:0;
  clear:both;  
}
ul.steps li
{
  float:left;  
  position:relative;  
  text-align:center;
  font-size: 1em;
  white-space:nowrap;
}

ul.steps li span
{   
  margin:0 auto;
  line-height:2em;
  display:block;
  height:100%;
  width:100%;
  font-size:2em;
  width:2.2em;  
  height:2.2em;  
  z-index: 10;
  background: #75C2EB;
  border-radius: 50%;
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  color: #fff;   
  white-space: nowrap;  
    box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;

}
ul.steps li span.active
{
    border:solid #AFE0FA .1em;
  line-height:1.9em;

}


/* Controls */
.controls{
  margin-top:20px;
}
.controls button
{
  border:solid #222 .2em;
  background-color:#555;
  padding:.5em .8em .5em .8em;
  color:#ccc;
  cursor:pointer;
}
.controls,input {
  font-family:verdana;
  color:#555;
   }
.controls > div
{ 
  margin-bottom:5px;
}
.controls label
{
  display:inline-block;
  width:70px;  
}
.controls input
{
  text-align:center;
  border:solid #ccc 1px;
  width:30px;    
}

$(document).ready(function(){

  
  $('#update').click(function() {
      var pb = new progressBar($('#input_progress').val(), $('#input_steps').val(),true);
  });
});


/* todo. Turn into a prototype function */
var progressBar = function (_step,_steps, _showSteps) {  
  this.currentStep = _step;
  this.totalSteps = _steps;
  this.showSteps = false;
  
   $('.progress-wrapper').html('');
  $('.progress-wrapper').append('<div class="progress-bar"></div><div class="steps-wrapper"><ul class="steps"></ul>');
    
  
  for(i = 0; i != _steps; i ++)
    {      
      $(".steps").append("<li></li>");
    }
  
  var steps = $('.steps li').length;  
  var i = 0;
  $.each($('.steps li'), function( index, value ) {    
    if(_showSteps == true)
      {    
        var si = (_step -1);
        if(index == si){
          $(this).prepend('<span class="active">'+ (index + 1) + '</span>');                    
          }        
        	else if(index >= si)
          {
            $(this).prepend('<span>'+ (index + 1) + '</span>');
          }
        	else if(index <= si)
          {
            $(this).prepend('<span class="halflings halflings-ok"></span>');
          }        
      }    
    i++;
	});	  
  var g = (100 / i ).toFixed(4);  
  var stepLength = $('.steps li').first().width();    
  var pbLength = (_step >= steps) ? (g * _step) :  ((g * _step) - (g / 2));

  $('.steps li').css("width", g + '%');    
  $('.progress-bar').css("width", pbLength +"%");  
  
};
progressBar.prototype.updateProgress = function() {  
};