Responsive Timeline

by godfrzero

HTML

<div class="container">
  <div id="uptime-1" class="uptime"></div>
  <div id="uptime-2" class="uptime"></div>
  <div id="uptime-3" class="uptime"></div>
  <div id="uptime-4" class="uptime"></div>
  <div id="inc-1" class="incident"></div>
  <div id="inc-2" class="incident"></div>
</div>

CSS

.container {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  background: whitesmoke;
  position: relative;
  overflow: hidden;
}

.incident {
  min-width: 1px;
  background: red;
  height: 100%;
  position: absolute;
}

.uptime {
  min-width: 1px;
  background: lightgreen;
  height: 100%;
  position: absolute;
}

#uptime-1 {
  width: 20%;
}

#uptime-2 {
  width: 0.1%;
  left: 20.1%;
}

#uptime-3 {
  width: 59.7%;
  left: 20.3%;
}

#uptime-4 {
  width: 20%;
  left: 80.1%;
}

#inc-1 {
  left: 20%;
  width: 0.1%;
}

#inc-2 {
  left: 20.2%;
  width: 0.1%;
}