JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
  <img src="https://via.placeholder.com/300x200?text=1" active='1' />
  <img src="https://via.placeholder.com/300x200?text=2" />
  <img src="https://via.placeholder.com/300x200?text=3" />
  <figcaption>
    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <path id="mypath" fill="#61C0BF" d="" />
    </svg>
  </figcaption>
</figure>

CSS

figure {
  position: relative;
  margin: 0;
  padding: 0;
}
figure > img {
  display: none;
  animation: timer 30ms 0ms 101 linear;
}
figure > img[active] {
  display: block;
}
figure > figcaption > svg {
  height: 50px;
  width: 50px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}
@keyframes timer {}

JavaScript

function start(e){
  e.target.mycounter = 0;
}
function mycalc(e){
	e.target.mycounter++;
	let a = 360 * e.target.mycounter / 100;
  let x = 0.5*Math.sin(a * Math.PI / 180);
  let Y = Math.sqrt((0.5-(0.5*Math.cos(a * Math.PI / 180)))-x*x);
  let X = 0.5 + x;
  if(a==360){
  	X = 0.49999;
    Y = 0.00000;
  }
  document.getElementById('mypath').setAttributeNS(null,'d',
  	'M0.5,0.5 L0.5,0 A0.5,0.5 0 '+(a>180?1:0)+',1 '+X+','+Y+' z'
  );
}
function pager(e){
	let elem = e.target;
  elem.removeAttribute('active');
  elem = elem.nextElementSibling;
  if(elem.nodeName!='IMG'){
  	elem = elem.parentNode.firstElementChild;
  }
  elem.setAttribute('active','1');
}

document.querySelectorAll('figure > img').forEach(function(mit){
	mit.addEventListener('animationstart',start);
	mit.addEventListener('animationiteration',mycalc);
  mit.addEventListener('animationend',pager);
});