Progress Bar with ticks

progressbar.html

<!-- Source: http://codepen.io/anon/pen/egrGVL - Captain Anononymous -->
<div class="timeline-container">
<div class="timeline">
  <!-- TIMELINE PROGRESS BAR OUTER STROKE -->
  <div class="progress-timeline-border ">
    <!-- TIMELINE PROGRESS BAR -->
    <div class="progress-timeline">
      <!-- CURRENT MILEAGE MARKER -->
      <div class="timeline-marker" style="left: 125px">
        <div class="timeline-current-mileage">
          <p><strong>Your Miles:</strong></p>
          <p>0 miles</p>
        </div>
      </div>
      <!-- TIMELINE PROGRESS BAR TABS/EVENTS -->
      <ul class="progress-timeline-tabs">
        
        <li>
          <a href="#">
            <div class="progress-timeline-tab-dot" style="left: 0px;">
              <div class="tab-event-marker">
                <div class="tab-event">
                  <p>0</p>
                  <p><strong>miles</strong></p>
                </div>
              </div>
            </div>
          </a>
        </li>

        <li>
          <a href="#">
            <div class="progress-timeline-tab-dot active" style="left: 250px;">
              <div class="tab-event-marker">
                <div class="tab-event">
                  <p>250</p>
                  <p><strong>miles</strong></p>
                </div>
              </div>
            </div>
          </a>
        </li>
        
        <li>           
          <a href="#">
            <div class="progress-timeline-tab-dot" style="left: 500px;">
              <div class="tab-event-marker">
                <div class="tab-event">
                  <p>500</p>
                  <p><strong>miles</strong></p>
                </div>
              </div>
            </div>
          </a>
        </li>
        
      </ul>
      
      <div class="progress-bar-timeline progress-bar-timeline-fill" style="width: 125px"></div>
    </div>
  </div>

  <!-- class="extension-scroll-hack" Allows horizontal scroll bar to have 20px on right side -->
  <div class="extension-scroll-hack"></div>
</div>
</div>

style.css

/* <!-- Source: http://codepen.io/anon/pen/egrGVL - Captain Anononymous --> */
.timeline-container {
  overflow: auto;
  padding: 100px 20px;
  width: 600px;
  background-color: #fff;
  border: 1px solid #333;
}


ul {
  list-style: none;
}
.progress {
  overflow: hidden;
  height: 8px;
  margin-bottom: 0px;
  background-color: green;
  border-radius: 0px;;
}

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  color: green;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #d3d3d3;
}

.timeline {
  position: relative;
  width: 500px;
  padding:10px 34px;
}

.timeline-marker{
  top: -63px;
  margin-left: -50px;
  padding: 5px;
  background-color: rgba(240,240,240,1);
  border: 1px solid rgba(211,211,211,1);
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: absolute;
  z-index: 100;
}

.timeline-marker:after {
    position: absolute;
    top: 50px;
    left: 42%;
    content: " ";
    height: 0px;
    width: 0px; 
    border-top: 10px solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-color: rgba(240,240,240,1) rgba(0,0,0,0) rgba(0,0,0,0)  rgba(0,0,0,0);
}

.timeline-marker:before {
    position: absolute;
    top: 50px;
    left: 41%;
    border: solid transparent;
    content: " ";
    height: 0px;
    width: 0px;
    border-top: 11px solid;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    border-color: rgba(211,211,211,1) rgba(0,0,0,0) rgba(0,0,0,0)  rgba(0,0,0,0);
  }

.timeline-current-mileage {
  text-align: center;
  margin:0px;
}

.timeline-current-mileage p {
    margin:0px;
  }


/*.progress-timeline-border {
  border: 1px solid rgba(211,211,211,1);
  padding:10px 20px; 
  background-color: rgba(255,255,255,1);
}
*/
 
.progress-timeline {
  height: 10px;
  margin-bottom: 0px;
  background-color: rgba(225,225,225,1);
  position: relative;
}


.progress-bar-timeline {
  float: left;
  height: 100%;
}

.progress-bar-timeline-fill {
  background-color: red;
}

.extension-scroll-hack {
  position: absolute;
  left: 100%;
  width: 20px;
  height: 1px;
  margin: 0;
  background: transparent;
}

.progress-timeline-tabs {
  margin:0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
  top: -5px;
  left: -10px;
}

.progress-timeline-tab-dot{
  position: absolute;
  /*border-radius: 50%;*/
  background: #BADA55;
  width: 3px;
  height: 19px;
  border: 1px solid #999;
  background-color: #ffffff;
  display: block;
}

.progress-timeline-tab-dot.active{
  background-color: yellow;
}




.tab-event-marker {
  top:24px;
  left:-37px;
  margin: 0px;
  padding: 5px;
  background-color: transparent;
  border: 1px solid transparent;
  display: inline-block;
  zoom: 1;
  *display: inline; 
  text-align: center;
  position: absolute;
  z-index: 100;

}

.tab-event-marker .tab-event {
  width:81px;
  text-align: center;
  margin:0px;
  color:#999;
}

.tab-event p {
  color:@gray;
  margin:0px;
}



.active .tab-event-marker {
  background-color: white;
  border: 1px solid;
  border-color: rgba(211,211,211,1);
}

.active .tab-event-marker .tab-event p {
      color:#333;
      margin:0px;
  }

.active .tab-event-marker:after {
    float: left;
    padding:0px;
    position: absolute;
    top: -23px;
    left: 40%;
    content: " ";
    height: 13px;
    width: 0px;
    border-bottom: 10px solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(255,255,255,1) rgba(0,0,0,0);
  }

.active .tab-event-marker:before {
    padding:0px;
    position: absolute;
    top: -26px;
    left: 39%;
    content: " ";
    height: 15px;
    width: 0px;
    border-bottom: 11px solid;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent; 
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(211,211,211,1) rgba(0,0,0,0);
}

  
 a .active {
  cursor: default;
}