title: How to fill circle based on a value in CSS
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle
  {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;
    &lt;/div&gt;
  &lt;div class="value"&gt;30&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If value is 30, I just want to fill the circle 30% with a color let it be red.
  How do i do this using only css?</p>
  
  <p><strong>EDIT</strong> to answer @AMIT</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fullCircle
  {
    width: 100px;
    height:100px;
    bordeR: 1px solid;
    border-radius: 50%;
    background-color: #f00;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fullCircle"&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is 100% filled circle. So I hope you clear now what I mean by 30% filled circle.</p>
  
  <p>If it is possible by CSS, it will be compatible. Why not?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>A google Image to answer <code>filled</code>
  <a href="https://www.google.co.in/search?q=partially+filled+circle&amp;espv=2&amp;biw=1440&amp;bih=799&amp;tbm=isch&amp;imgil=w8gbqDKinF93nM%253A%253BO3RXx3jnK3Q-IM%253Bhttp%25253A%25252F%25252Fwww.free-power-point-templates.com%25252Farticles%25252Fharvey-balls-in-powerpoint%25252F&amp;source=iu&amp;pf=m&amp;fir=w8gbqDKinF93nM%253A%252CO3RXx3jnK3Q-IM%252C_&amp;usg=__lkO5L1p3llO0-RG2J0ZGDn2yC4s%3D&amp;ved=0CEEQyjdqFQoTCI2y4LbKm8gCFULipgodAV4NCQ&amp;ei=AysKVs2kJsLEmwWBvLVI#imgrc=w8gbqDKinF93nM%3A&amp;usg=__lkO5L1p3llO0-RG2J0ZGDn2yC4s%3D" rel="nofollow">link</a></p>