SVG circle animation

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <figure class="chart" data-percent="84" data-text="84%">
      <svg width="100" height="100" class="chart__svg">
      <circle class="circle-base" cx="139" cy="49" r="45" transform="rotate(-90, 95, 95)"/>
      <circle class="circle" cx="140" cy="50" r="45" transform="rotate(-90, 95, 95)"/>
      </svg>
    </figure>
  </body>

</html>

.chart {
position: relative;
display: inline-block;
width: 100px;
margin: 0 auto;
color: #999;
font-size: 20px;
text-align: center;
display: block;
height: 100px;
}

.chart:before {
  content: attr(data-text);
display: block;
width: 100%;
text-align: center;
line-height: 100px;
  color: #333;
}

.chart__svg {
  position: absolute;
  top: 0;
  left: 0;
}

.chart .circle {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 5px;
  stroke-dasharray: 283;
  -webkit-animation-play-state: running;
}

.chart .circle-base {
  fill: none;
  stroke: #fff;
  stroke-width: 5px;
}

.chart[data-percent="84"] .chart__circle {
  stroke-dashoffset: 283;
  -webkit-animation: 2s show84 1s;
  animation: 2s show84 1s;
  animation-fill-mode: forwards;
}

@keyframes show84 {
  from {
    stroke-dashoffset: 283;
  }
  to {
    stroke-dashoffset: 45.28;
  }
}

@-webkit-keyframes show84 {
  from {
    stroke-dashoffset: 283;
  }
  to {
    stroke-dashoffset: 45.28;
  }
}