title: Creating progress bar from dots
body: <pre><code>&lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  
  .dot {
    height: 5px;
    width: 5px;
    background-color: #FAE089;
    border-radius: 50%;
    display: inline-block;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/duauvyrv/" rel="nofollow noreferrer">https://jsfiddle.net/duauvyrv/</a></p>
  
  <p>My question is, what could be the best way making a countdown timer from those dots by changing color? </p>
  
  <p>Example: Count down from 10 seconds, and change dot from yellow to grey. If timer is up, all the dots should be grey as well.</p>