NTCEG Progress Bar

index.html

<div class="Container">
<div id="Solution-Steps" class="">
  <div class="Progress-Meter"><div class="Progress"></div></div>
  <ol class="Steps">
  <li id="Step-1">
    <a href="#" class="Step">
    <strong class="Number">1</strong>
    Pre Drill &amp; Construction
    </a>
  </li>
  <li id="Step-2">
    <a href="#" class="Step">
    <strong class="Number">2</strong>
    Drilling &amp; Completion
    </a>
  </li>
  <li id="Step-3">
    <a href="#" class="Step">
    <strong class="Number">3</strong>
    Production &amp; Operations
    </a>
  </li>
  <li id="Step-4">
    <a href="#" class="Step">
    <strong class="Number">4</strong>
    Closure
    </a>
  </li>
</ol>
</div>
</div>

ntceg-progress-bar.markdown

NTCEG Progress Bar

A Pen by Shaw on CodePen.

License.

script.js

var count = 0,
    step = "",
    container = $("#Solution-Steps")

$(".Step").on("click",function(){
  container.removeClass("Step-1 Step-2 Step-3 Step-4");
  parent = $(this).parent();
  count = parent.attr("id").replace("Step-", '');
  //console.log(count);
  
  $(".Step").removeClass("Current Past");
  
  if ( count > 4 ) {
    count = 0;
    $(".Step").removeClass("Current Past");
  }
  
  for (var i = count; i > 0; i--) {
    //console.log("#Step-"+i+" .Step");
    $("#Step-"+i+" .Step").addClass("Past");
  }
  
  step = "Step-"+count;
  container.addClass(parent.attr("id"));
  
  $(this).addClass("Current");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

@blue: #1f9bde;
@blueLight: #7fc2e7;
@gray: #b0b2b3;
@grayLight: #e9e9ea;

body { 
  background: @blue;
  font: 14px/20px normal Helvetica-Neue, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.Container { 
  width: 60%; 
  margin: 0 auto; 
  position: relative;
}

#Solution-Steps {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: #FFF;
  margin: 0;
  padding: 1em;
  list-style-type: none;
  counter-reset: my-badass-counter;
  
  .Progress-Meter {
    position: absolute;
    top: 2.25em;
    background: @grayLight;
    width: 80%;
    height: 1em;
    left: 50%;
    margin-left: -40%;
  }
    
  .Progress { 
    width: 0;
    height: 100%;
    background: @blueLight url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAIUlEQVR42mXIwQkAAAiAwBZs/3EMv/k4BAf4NsNmKEMZOsV2TDcLs1t8AAAAAElFTkSuQmCC) repeat left top;
    border-radius:  0 1em 1em 0;
    transition: width 1s ease-in-out;
  }
  
  &.Step-1 .Progress { width: 0%; }
  &.Step-2 .Progress { width: 33%; }
  &.Step-3 .Progress { width: 66%; }
  &.Step-4 .Progress { width: 100%; }
  
  .Steps,
  .Steps li { 
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  li { 
    text-align: center;
    font-weight: bold;
    float: left;
    width: 30%;
    position: relative;
    
    &:first-child,
    &:last-child { width: 20%; }
  }
  
  .Step {
    display: block;
    text-decoration: none;
    color: #444;
    position: relative;
    transition: all 200ms ease-in-out;
    
    .Number { display: none; }
    
    &:before { 
      display: block;
	content: counter(my-badass-counter);
	counter-increment: my-badass-counter;
      border-radius: 100%;
      background: @grayLight;
      font-size: 2em; 
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5em;
      border: solid 0.15em @grayLight;
      color: @gray;
      margin: 0 auto 0.25em;
      font-weight: normal;
      transition: all 200ms ease-in-out;
    }
    
    &:hover {
      color: @blueLight;
      
      &:before {
        background: @blueLight;
        color: #FFF;
      }
    }
    
    &:after {
      content: "&";
      display: block;
      width: 100%;
      height: 1em;
      background: @grayLight;
      position: absolute;
      top: 1.5em;
      left: 50%;
    } 
    
    &:last-child:after {
      display: none;
    }
    
    &.Past {
      color: @blueLight;
      &:before {
        background-color: @blueLight;
        border-color: @blueLight;
        color: #FFF;
        transition: all 400ms ease-in-out 0ms;
      }
      &:after {
        background-color: @blueLight;
      }
    }
    
    &.Current {
      color: @blue;
      &:before {
        background-color: @blue;
        border-color: @blueLight;
        color: #FFF;
        transition: all 500ms ease-in-out 300ms;
      }
    }
  }
  
}