CSS Steps w/ Dots

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="steps">
      <div class="progress-line">
        <ul class="list-inline">
          <li class="first active">
            <div class="circle"><div class="circle inner-circle"></div></div>
            <div class="step-id">Locations</div>
          </li>
          <li class="middle">
            <div class="circle"><div class="circle inner-circle"></div></div>
            <div class="step-id">Details</div>
          </li>
          <li class="last">
            <div class="circle"><div class="circle inner-circle"></div></div>
            <div class="step-id">Billing</div>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

.steps {
  width: 300px;
  height: 50px;
  position: relative;
  margin: 0 auto;
}

.steps .progress-line {
  top: 50%;
  left: 5%;
  position: absolute;
  background-color: #cdcfd3;
  width: 100%;
  height: 2px;
  z-index: 10;
}

.steps .circle {
  width:20px;
  height:20px;
  border-radius:250px;
  border: 2px solid #cecece;
  background:#fff;
  text-align: center;
  position: absolute;
  top: -30%;
  z-index: 20;
}

.steps .inner-circle {
  width: 80%;
  height: 80%;
  background-color: #fff;
  position: absolute;
  top: 12% !important;
  left: 10% !important;
  border: 0;
}

.steps .step-id {
  color: #6a6c6f;
  font-size: 90%;
  text-align: center;
}

.steps .list-inline li {
  width: 100px;
  position: relative;
  padding: 13px 0 0 0;
  margin: 0;
  display: inline-block;
  float: left;
  cursor: pointer;
}

.steps .list-inline { margin: 0; padding: 0; }
.steps .list-inline li.first .circle { left: -10%; }
.steps .list-inline li.middle .circle { left: 40px; }
.steps .list-inline li.last .circle { right: -10%; }
.steps .list-inline li.active { cursor: default; }
.steps .list-inline li.active .inner-circle { background-color: #66c93d !important; }
.steps .list-inline li.first .step-id { margin-left: -100%; }
.steps .list-inline li.last .step-id { margin-left: 85%; }