title: CSS3 simple donut chart
body: <p>What I'm trying to do is create a simple donut chart. I'm currently using CSS(3) only but I don't know if it's possible without javascript.</p>
  
  <p>What I have so far: 
  <a href="http://jsfiddle.net/aBP5Q/">http://jsfiddle.net/aBP5Q/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="donut-container" style="background: #9C0;"&gt;
      &lt;div class="donut-inner"&gt;
          &lt;div class="donut-label"&gt;HTML&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.donut-container {
      width: 150px;
      height: 150px;
      float: left;
      -webkit-border-radius: 75px;
      -moz-border-radius: 75px;
      border-radius: 75px;
      margin-right: 20px;
  }
  
  .donut-inner {
      width: 134px;
      height: 134px;
      position: relative;
      top: 8px;
      left: 8px;
      background: #FFF;
      -webkit-border-radius: 65px;
      -moz-border-radius: 65px;
      border-radius: 65px;
  }
  
  .donut-label {
      line-height: 130px;
      text-align: center;
      font-size: 20px;
  }
  </code></pre>
  
  <p>I would like to display the green and blue colors as the precentage. So no green is 0% and full green (360 degrees) is 100%. Maybe even with a simple animation when the chart is loaded if its possible.</p>
  
  <p>Your help is much appreciated. </p>