title: Create and Filling arc progressively with css - circle progress bar
body: <p>I'm struggling to fill an arc like a progress bar because I'm not that good working with css.</p>
  
  <p>I want to achieve a "progress" arc like this:
  <a href="https://i.stack.imgur.com/jf9ED.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jf9ED.png" alt="enter image description here"></a></p>
  
  <p>I came across with this: <a href="https://codepen.io/enslavedeagle/pen/AXzaKE" rel="nofollow noreferrer">https://codepen.io/enslavedeagle/pen/AXzaKE</a> </p>
  
  <pre><code>#arc,
  #arc::before {
    display: block;
    box-sizing: border-box;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: transparent;
    padding: 0;
    margin: 0;
  }
  
  #arc {
    border: solid #00BBEE 12px;
    clip: rect(0px, 100px, 50px, 0px);
    margin: 25px;
  }
  
  #arc::before {
    content: '';
    border: solid black 12px;
    top: -12px;
    left: -12px;
    clip: rect(0px, 100px, 50px, 0px);
    transform: rotate(-150deg);
    /* define the fill length, using the rotation above.
       from -180deg (0% fill) to 0deg (100% fill) */
    /* if you have a better solution to make thing like this 
       work, please let me know! :) */
  }
  </code></pre>
  
  <p>and try to customize to be like what I want to but with no sucess until now: here: <a href="https://codepen.io/anon/pen/qpNrEP" rel="nofollow noreferrer">https://codepen.io/anon/pen/qpNrEP</a></p>
  
  <p>Could any one give some help with this? Can also be alternative solution to achieve this.</p>
  
  <p>I appreciate</p>
  
  <p>Kind regards,</p>