title: Clip-path, how to create a circular progress bar?
body: <p>I have seen a lot of solutions to creating a circular progress bars. They all seem to be extremely long and convoluted. I would like to create a very simple one, just by drawing two circles on top of each other and clipping a portion of the outter one, in order to create an appearance of a progress bar at less than 100%.</p>
  
  <p>My HTML</p>
  
  <pre><code>    &lt;div class="outter"&gt;
        &lt;div class="inner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>.outter {
    background-color: #08a1db;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
  }
  
  .inner {
    background-color: white;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -42px 0 0 -42px;
  }
  </code></pre>
  
  <p>Now the part I am having trouble with is using clip-path. I can't figure out, from the documentation, how to clip the outter circle and create that effect of the progress bar. Any suggestions?</p>