title: css is not rendered properly
body: <p>I'm trying to build a progress bar component where I want to achieve a specific design for that, as you can see how I tried it in this codesandbox link:</p>
  <p><a href="https://codesandbox.io/s/determined-lamport-7zjvwj" rel="nofollow noreferrer">https://codesandbox.io/s/determined-lamport-7zjvwj</a>.</p>
  <p>I want to achieve the following behavior:</p>
  <ul>
  <li>Initially, all dots should be blue except the first one which is rounded in blue.</li>
  <li>I want to keep the dots in the progress bar when I change the properties into blue if the percentage didn't cover them otherwise white</li>
  </ul>
  <p>But somehow my CSS calculation is not working properly as expected which I believe I missed something, so any ideas?</p>