title: How to animate the filling of a html element
body: <p>So the problem I have is I am trying to animate the filling of a circle html element. The circle starts out grey, the user will provide a number and the circle will change color by having another blue circle fill up to the percentage of the original circle specified by the user. I am having trouble figuring out how to animate, or create, the filling of the blue circle. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="circle circle-outer-border"&gt;
      &lt;div class="circle circle-background"&gt;
          &lt;div class="circle circle-fill"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.circle{
    height: 200px;
    width: 200px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
  }
  
  .circle-outer-border{
    border: 1px solid black;
  }
  
  .circle-background{
    border: 20px solid #b1b1b1;
    background-color: transparent;
    margin-left: -1px; margin-top: -1px /** to make up for outer-border        margin**/
  }
  
  .circle-fill{
    border: 20px solid #147fc3;
    background-color: transparent;
    margin-left: -21px; margin-top: -21px;
  }
  </code></pre>
  
  <p>So I have 3 circles, one for just the black border, one that just shows the grey border and a third one that is the third circle which is the one I will animate to act as a 'blue fill' I have stacked them on top of each other in order to give it the effect of a dial filling. Again I'm just not sure how to do the animation, is there a way to just show a portion of the blue circle and continually show more until it shows the whole blue circle? Thank you for the help. I am writing this in a angularjs app, but have not written the angularjs code yet.</p>