title: CSS animate circle border filling with color
body: <p>I'm new to learning about CSS animations.
  I have a circle with an arc going around it, but I want to make it leave a trail behind. The idea is I'd use this to visually show how many credits somebody has used e.g. 75 / 100 credits used, the circle border becomes 3/4 colored-in.</p>
  
  <p>I have a <a href="http://jsfiddle.net/23Wjj/24/" rel="noreferrer">fiddle</a> to show the arc stopping at the top. What I need is a way to</p>
  
  <p>1) Make it stop at different points depending on the number of credits (can I use the 0%, 50% etc. inside keyframes somehow, like adding a class via jQuery?)</p>
  
  <p>2) Leave a trail behind, so it fills with color.</p>
  
  <pre><code>.circle {
  /* code - pls see fiddle */
  
  @keyframes animation {
  0% {transform: rotate(0);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
  }
  </code></pre>