style.css

.timeline-block {
  position: relative;
  height: 180px;
  z-index: 1;
}

.timeline-block .timeline-line {
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 6px;
  background: #ccc;
  border-radius: 6px;
  cursor: pointer;
}

.timeline-block .timeline-progress {
  position: absolute;
  top: 0;
  left: 18px;
  height: 0;
  width: 6px;
  border-radius: 6px;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
  background: #7abcff; /* Old browsers */
  background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */

  cursor: pointer;
}

.timeline-bookmark {
  position: absolute;
  top: 0px;
  left: 36px;
}

.timeline-bookmark>div{
  margin-top: -8px;
  margin-left: 5px;
}

div.timeline-bookmark::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -21px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  //background-color: #d2d2d2;
  box-shadow: 0 0 0 3px #4286f4, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 3px rgba(0, 0, 0, 0.05);
  transition: all .2s ease-in-out;
  cursor: pointer;
}

div.timeline-bookmark.visited::before {
  opacity: 0.7;
}


div.timeline-bookmark:hover::before {
  transform: scale(1.5);
  opacity: 1;
}

.timeline-marker {
  position: absolute;
  top: 0px;
  left: 36px;
  z-index: 0;
  opacity: 0.3;
}

.timeline-marker>div.text{
  margin-top: -14px;
  font-style: italic;
}

div.timeline-marker::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -21px;
  height: 0px;
  width: 12px;
  border-bottom: 2px solid #000;
}