SVG: Progress Pie

by Kevin Pliester

HTML

<div class="flex">
  <div class="donut">
    <span class="counter">65%</span>
    <svg width="100%" height="100%" viewBox="0 0 42 42">
      <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
      <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#337E96" stroke-width="4"></circle>

      <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#D2D3D4" stroke-width="4" stroke-dasharray="35 65" stroke-dashoffset="25"></circle>
    </svg>
  </div>

  <div class="donut">
    <span class="counter">35%</span>
    <svg width="100%" height="100%" viewBox="0 0 42 42">
      <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
      <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#337E96" stroke-width="4"></circle>

      <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#D2D3D4" stroke-width="4" stroke-dasharray="65 35" stroke-dashoffset="25"></circle>
    </svg>
  </div>
</div>

CSS

body {
  font-family: "Verdana";
  font-size: 16px;
}

.donut {
  position: relative;
  max-width: 75px;
  height: 75px;
}

.donut > .counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 12px;
}

.flex {
  display: flex;
}

.flex > * {
  flex: 1;
}