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

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/