Cacher is the code snippet organizer for pro developers

<div class="progress">
  <h1>SVG Radial Progress Bar</h1>
  <section>
    <svg height="120" width="120">
      <circle cx="60" cy="60" r="40" stroke="#392F32" stroke-width="8" fill="none" />
      <circle 
              r="40" 
              cx="60" 
              cy="60" 
              stroke="#ff7171" 
              fill="transparent" 
              stroke-dasharray="150" 
              stroke-dashoffset="60" 
              stroke-width="7">
      </circle>
      <text x="45" y="65" fill="#F8F9F9">33%</text>
    </svg>   
  </section>
  <section>
    <svg height="120" width="120">
      <circle cx="60" cy="60" r="40" stroke="#392F32" stroke-width="8" fill="none" />
      <circle 
              r="40" 
              cx="60" 
              cy="60" 
              stroke="#C2E362" 
              fill="transparent" 
              stroke-dasharray="120" 
              stroke-dashoffset="60" 
              stroke-width="7">
      </circle>
      <text x="45" y="65" fill="#F8F9F9">50%</text>
    </svg>   
  </section>
  <section>
    <svg height="120" width="120">
      <circle cx="60" cy="60" r="40" stroke="#392F32" stroke-width="8" fill="none" />
      <circle 
              r="40" 
              cx="60" 
              cy="60" 
              stroke="#67D3FD" 
              fill="transparent" 
              stroke-dasharray="240" 
              stroke-dashoffset="60"  stroke-width="7">
      </circle>
      <text x="45" y="65" fill="#F8F9F9">75%</text>
    </svg>   
  </section>
</div>

body {
  background-color: #3f3437;
  color: #F8F9F9;
  font-family: helvetica;
  h1 {
    font-weight: normal;
    text-align: center;
    margin-top: 1rem;
    line-height: 1;
  }
  .progress {
    width: 400px;
    margin: 3rem auto;
    background-color: #4C3E41;
    padding: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 2px 1px 0 rgba(0,0,0,.12);
    text-align:center;
    section {
      display: inline-block;
    }
  }
}