<svg class="chart" viewBox="0 0 256 256" overflow="visible">
  <g transform="rotate(-90 128 128)">
    <circle cx="50%" cy="50%" r="40%" fill="none"/>
    <circle cx="50%" cy="50%" r="45%" fill="none"/>
    <circle cx="50%" cy="50%" r="50%" fill="none"/>
  </g>
</svg>

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
}

.chart {
  display: block;
  width: 50%;
  margin: auto;
}

.chart circle {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  stroke-width: 5px;
  stroke-linecap: round;
  animation: anim 3s both infinite alternate;
}

.chart circle:nth-child(1) {
  --t: 0.1;
  --len: calc(6.2831853 * 40%);
  stroke: red;
}

.chart circle:nth-child(2) {
  --t: 0.15;
  --len: calc(6.2831853 * 45%);
  stroke: green;
}

.chart circle:nth-child(3) {
  --t: 0.2;
  --len: calc(6.2831853 * 50%);
  stroke: blue;
}

@keyframes anim {
  to { stroke-dashoffset: calc(var(--len) * var(--t, 0)) }
}