title: Circular progress bar (border)
body: <p>I found <a href="https://dribbble.com/shots/1438386-iOS7-longtouch-sharing-concept" rel="nofollow noreferrer">this</a> on dribbble.</p>
  <p>Is it possible to create this circular progress bar (where the progress bar is the outer border of the circle) in the first ~3 seconds of the gif?</p>
  <p>So far, I have the circle itself without any animation on <a href="https://jsfiddle.net/44ch0p8u/7/" rel="nofollow noreferrer">jsfiddle</a></p>
  <p>How would I go on from here?</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>body {
    background-color: #3a88cd;
    padding: 60px;
  }
  
  .circle {
    width: 60px;
    height: 60px;
    background: white;
    position: relative;
    border-radius: 100%;
  }
  
  .circle:after {
    content: &quot;&quot;;
    display: block;
    position: absolute;
    top: -8px;
    left: -8px;
    bottom: -8px;
    right: -8px;
    border: 3px solid white;
    border-radius: 100%;
  }
  </code></pre>