title: Filling a circle border by percent
body: <p>I tried implementing several guides to creating a circle which fills according to a percentage but i can't seem to get it to work (no animation, only a static CSS circle).</p>
  
  <p>The circle border currently abides to <code>background-image: linear-gradient</code> which i first set to a <code>(90+(360*0.percent))deg</code> and a second one which is set to <code>90deg</code>. It works well on the first 50% but beyond that it doesn't fill accordingly.</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-css lang-css prettyprint-override"><code>.circle {
    position: relative;
    top: 5px;
    left: 5px;
    text-align: center;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: #ffffff;
  }
  
  .circle-border {
    position: relative;
    text-align: center;
    width: 110px;
    height: 110px;
    margin-left: 30%;
    border-radius: 100%;
    background-color: #E53B3B;
    background-image: linear-gradient(162deg, transparent 50%, #f0f0f0 50%), linear-gradient(90deg, #f0f0f0 50%, transparent 50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle-border"&gt;
    &lt;div class="circle"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What values of <code>linear-gradient</code> should be changed when i want the circle to be filled for more than 50%?</p>