设置水平时间线

Question

我正在尝试创建一个以开始日期和结束日期为基础的时间轴。在该时间轴内，有一个圆圈中的图标表示x个里程碑。我希望用另一种颜色的线表示该时间轴上的今天，但似乎无法使其正确重叠时间轴线。代表今天的线在时间线下方，我希望它在该线的顶部带有一些动画。我的代码在下面，这是到目前为止我得到的：

.show.ng-hide,
.hide.ng-hide {
  animation-name: fadeOut;
  animation-duration: .5s;
}

.show {
  animation-name: fadeIn;
  animation-duration: .5s;
}

#timeline-wrap {
  margin: 20% 0;
  top: 100;
  position: relative;
}

#timeline {
  height: 6px;
  width: 100%;
  background-color: $color-light;
  position: relative;
}

#today_width {
  height: 6px;
  background-color: blue;
  position: relative;
}

.marker {
  z-index: 1000;
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  position: absolute;
  margin-left: -25px;
  border: 2px solid black;
  background-color: white;
  border-radius: 50%;
  top: -25px;
}

.marker i {
  font-size: 1.4em;
  line-height: 48px;
}

.marker:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.mlast {
  left: 100%
}

.timeline-panel {
  margin-top: 20%;
  min-width: 200px;
  border: 1px solid black;
  border-radius: 2px;
  position: relative;
  text-align: left;
  padding: 10px;
  float: left;
  color: black;
}

.timeline-panel:after {
  content: '';
  position: absolute;
  top: -27px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom: 15px solid;
}

<div id="timeline-wrap">
  <div id="timeline"></div>
  <div id="today_width" style="width:{{c.data.today_width}}"></div>

  <div class="marker timeline-icon" ng-if="c.data.rpm_case.performance_cycle_start" data-toggle="tooltip" data-placement="top" title="{{c.data.rpm_case.performance_cycle_start | date:fullDate}}">
    <a href="javascript:void(0)">
      <i class="far fa-play-circle"></i>
    </a>
  </div>

  <div class="marker timeline-icon" ng-repeat="event in c.data.rpm_case.milestones | orderBy : 'milestone_start' track by $index" style="left: {{event.milestone_percentage_dur}}">
    <a href="javascript:void(0)" ng-click="showDetails = ! showDetails">
      <i class={{event.milestone_icon}}></i>
    </a>
    <div class="timeline-panel show" ng-show="showDetails">
      <div class="timeline-heading">
        <h4 class="timeline-title">{{event.milestone_name}}</h4>
        <p><small class="text-muted">
              <i class="glyphicon glyphicon-time"></i> Milestone Start: {{event.milestone_start | date : fullDate }}
              </small>
        </p>
      </div>
      <ul class="timeline-body">
        <li ng-repeat="task in event.tasks track by $index">
          <p>{{task.short_description}}</p>
          <p ng-if="task.task_state!='3'"><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i> Due Date: {{task.task_due_date}}</small></p>
          <p ng-if="task.task_state=='3'"><small class="text-muted"><i class="glyphicon glyphicon-ok-sign"></i> Completed {{task.updated | date: fullDate}}</small></p>
        </li>
      </ul>
    </div>
  </div>

  <div class="marker mlast timeline-icon" ng-if="c.data.rpm_case.performance_cycle_end" data-toggle="tooltip" data-placement="top" title="{{c.data.rpm_case.performance_cycle_end | date:fullDate}}">
    <a href="javascript:void(0)">
      <i class="far fa-play-circle"></i>
    </a>
  </div>
</div>

我意识到这可能是一个非常基本的时间表，因此，对其改进或提高效率的任何建议都将不胜感激。谢谢。