dougnut con css

donas.html

<style>
  body{
    background-color:#1497FF;
  }

  .pieContainer{
    height: 50px;
    width: 50px;
  }
  .before, .after{
    clip: rect(0px,50px,50px,25px);
  }

  .pieContainer {
    position: relative;
    border-radius: 50%;
    background-color: #ccc;
    border: 3px solid #fff;
  }
  .pie:after{
    position: absolute;
    top:50%;
    left:50%;
    content: " ";
    width: 45%;
    height: 45%;
    background-color: #fff;
    border-radius: 50%;
    transform:translate(-50%,-50%);
  }
  .pie .before, .pie .after{
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .pie .before{
    background-color: #0A0;
    transform:rotate(-180deg);
  }
  .pie .after{
    background-color: #CCC;
    transform:rotate(-180deg);
  }
</style>



10% = (360*0.1)-180
<div id="pie1" class="pieContainer">
  <div class="pie">
    <div style="transform:rotate(-144deg);" class="before"></div>
    <div class="after"></div>
  </div>
</div>


<br/>


60% = 360*0.1
<div id="pie2" class="pieContainer">
  <div class="pie">
    <div style="transform:rotate(36deg);" class="before"></div>
    <div style="transform:rotate(0deg);background-color:#0A0;" class="after"></div>
  </div>
</div>