html - 如何使用跟踪器创建进度条

Question

我现在只使用 CSS 创建了一个进度条，我需要放一个跟踪器，只是一个简单的小圆圈，跟踪它在进度条上的进度。

必须类似于此图片:

这是我的 CSS:

.container{
  width: 400px;
  margin: 0 auto;

}

.bar{
  width: 100%;
  background: #d7d7d7;
  padding: 17px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.bar-fill{
  height: 15px;
  display: block;
  background: #45c9a5;
  width: 0%;
  border-radius: 8px;

  -webkit-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-animation: mymove 5s infinite; 
  animation: mymove 5s infinite;
}


.bar-unfill{
  height: 15px;
  display: block;
  background: #fff;
  width: 100%;
  border-radius: 8px;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    from {width: 0%;}
    to {width: 100%;}
} 

/* Standard syntax */ 
@keyframes mymove {
   from {width: 0%;}
    to {width: 100%;}
}

这是 JSFIDDLE:https://jsfiddle.net/jLz2qksz/

一切都必须是纯 CSS。有什么想法吗？

Answer 1

这个怎么样:

<div class="container">
  <div class="plain-title">TEst</div>
  <div class="bar">
    <span class="bar-unfill">
        <span class="bar-fill"></span>
        <span class="spot-wrap">
            <span class="spot"></span>
        </span>
    </span>    
  </div>
</div>

.spot{
  height: 20px;
  display: block;
  background: #ff00ff;
  width: 20px;
  border-radius: 10px;
    position: relative;
    left: -20px;
}

.spot-wrap{
    position: relative;
    top: -18px;

  -webkit-animation: mymove2 5s infinite; 
  animation: mymove2 5s infinite;
}


/* Standard syntax */ 
@keyframes mymove2 {
   from {left: 0%;}
    to {left: 100%;}
}

https://jsfiddle.net/jLz2qksz/1/