title: How to create a progress bar with tracker
body: <p>I created a progress bar using CSS only now, I need to put a tracker on, just a simple small circle on it, tracking its progress on the bar.</p>
  
  <p>It must something similar to this image: <img src="https://i.stack.imgur.com/nFKBK.jpg" alt="enter image description here"></p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>.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%;}
  }
  </code></pre>
  
  <p>HERE'S THE JSFIDDLE: <a href="https://jsfiddle.net/jLz2qksz/" rel="nofollow noreferrer">https://jsfiddle.net/jLz2qksz/</a></p>
  
  <p>EVERYTHING MUST BE PURE CSS. Any Idea?</p>