css animate cirle chart

Pure CSS Animated SVG Circle Chart

by slawe

HTML

<svg class="circle-chart" width="200" height="200" viewBox="0 0 120 120">
              <circle class="circle-chart__background" cx="60" cy="60" r="54" fill="none" stroke="#323840" stroke-width="2" />
              <circle class="circle-chart__circle" cx="60" cy="60" r="54" fill="none" stroke="#ee776b" stroke-width="2" pathLength="100" stroke-linecap="round" stroke-dasharray="75.100" />
  <g class="circle-chart__info">
    <text class="circle-chart__percent" x="60" y="54" alignment-baseline="central" text-anchor="middle" font-size="15" fill="#b0bec7">75%</text>
  </g>
</svg>

CSS

.circle-chart__circle {
  animation: circle-chart-fill 1s reverse;
  transform: rotate(-90deg);
  transform-origin: center;
}

.circle-chart__info {
  animation: circle-chart-appear 1s 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);
  }
}