bootstrap progress bar with markers and labels

example

mixin progress(id)
  .bar-wrap
    .progress.no-extra-space(id=id)
    .progress-marker(style='right:25%')
    .progress-marker(style='right:50%')
    .progress-marker(style='right:75%')
mixin time-axis
  .time-axis
    .time-spot-end now
    .time-spot.text-center 6 hours ago
    .time-spot.text-center 12 hours ago
    .time-spot.text-center 18 hours ago
    .time-spot-end.text-right 24 hours ago


.row
  +progress('my_status')
.row
  +time-axis

helper

.bar-wrap {
  position: relative;
}

.progress-marker {
  width: 2px;
  height: 10px;
  position: absolute;
  background: black;
  bottom: -5px;
}

.time-axis {
  display: block;
  float: left;
  width: 100%;
  /*margin: 0px 0 10px 0;*/
}
.time-spot {
  display: block;
  float: left;
  width: 25%;
}
.time-spot-end {
  display: block;
  float: left;
  width: 12.5%;
}