title: How can i create a dynamic progress bar
body: <p><a href="https://i.stack.imgur.com/knDjN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/knDjN.png" alt="desired image" /></a></p>
  <p><a href="https://i.stack.imgur.com/0jxNI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0jxNI.png" alt="what i'm getting" /></a></p>
  <p>I am trying to create a progress bar which looks like the first image above but end up getting the second image as a result.
  I am using html, CSS and JavaScript. where did I get it wrong? Or is there something I am missing out?
  the black dots are not really that important to me as I am interested in the shape of the progress bar</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const numb = document.querySelector(".number");
  let counter = 0;
  setInterval(() =&gt; {
    if(counter == 65 ){
      clearInterval();
    }else{
      counter+=1;
      numb.textContent = counter + "%";
    }
  }, 80);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
  }
  html, body{
    display:grid;
    height:100%;
    text-align: center;
    place-items: center;
    background: #dde6f0;
  }
  .circular{
    height:120px;
    width: 120px;
    position: relative;
    transform:scale(2);
  }
  .circular .inner{
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin: -40px 0 0 -40px;
    background: #dde6f0;
    border-radius: 100%;
   
  }
  .circular .number{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index:10;
    font-size:18px;
    font-weight:500;
    color:#4158d0;
  }
  .circular .bar{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    clip: rect(0px, 120px, 120px, 70px);
  }
  .circle .bar .progress{
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-border-radius: 100%;
    clip: rect(0px, 70px, 120px, 0px);
    background: #FF6600;
  }
  .circle .left .progress{
    z-index:1;
    animation: left 4s linear both;
  }
  @keyframes left{
    100%{
      transform: rotate(180deg);
    }
  }
  .circle .right {
    transform: rotate(180deg);
    z-index:3;
   
  }
  .circle .right .progress{
    animation: right 4s linear both;
    animation-delay:4s;
  }
  @keyframes right{
    100%{
      transform: rotate(180deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circular"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
      &lt;div class="number"&gt;100%&lt;/div&gt;
      &lt;div class="circle"&gt;
          &lt;div class="bar left"&gt;
              &lt;div class="progress"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="bar right"&gt;
              &lt;div class="progress"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>