<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style> 
/**
1. The `reverse` animation direction plays the animation backwards which makes it start at the stroke offset 100 which means displaying no stroke at all and animating it to the value defined in the SVG via the inline `stroke-dashoffset` attribute.
2. Rotate by -90 degree to make the starting point of the stroke the top of the circle.
3. Using CSS transforms on SVG elements is not supported by Internet Explorer and Edge, use the transform attribute directly on the SVG element as a workaround
 */
.circle-chart {
  text-align: center;
}
.circle-chart__label {
  display: block;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}
.circle-chart__circle {
  animation: circle-chart-fill 2s reverse; /* 1 */
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}

.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1, -1); /* 1, 2, 3 */
}

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to {
    stroke-dasharray: 0 100;
  }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

</style>

<body>
<section class="circle-chart">
  <label class="circle-chart__label">Chart label</label>
  <svg viewbox="0 0 35.83098862 35.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart__background" stroke="#efefef" stroke-width="4" fill="none" cx="17.91549431" cy="17.91549431" r="15.91549431" />
      <circle class="circle-chart__circle" stroke="#00acc1" stroke-width="4" stroke-dasharray="20,100" stroke-linecap="none" fill="none" cx="17.91549431" cy="17.91549431" r="15.91549431" />
      <g class="circle-chart__info">
        <text class="circle-chart__percent" x="16.91549431" y="16.5" alignment-baseline="central" text-anchor="middle" font-size="8">20%</text>
        <text class="circle-chart__subline" x="16.91549431" y="21.5" alignment-baseline="central" text-anchor="middle" font-size="2">chart message!</text>
      </g>
    </svg>
</section>
</body>

</html>