JSFiddle - React, Tailwind, and code Playground

by samunplugged

HTML

<circle id="circle" />

CSS

body {
  background: black;
  width: 100%;
  height: 100%;
}
pie, circle {
    width: 2em;
    height: 2em;
    display: block;
    border-radius: 50%;
    background-color: green;
    border: 0px solid transparent;
    float: left;
    margin: 1em;
    position: relative;
}

circle:before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  display: block;
  border-radius: 50%;
  background-color: black;
  border: 0px solid transparent;
  margin: 0.25em;
  position: relative;
  z-index: 2;
}

JavaScript

var intervalObj;
var progress = 0;
function animate() {
	var elm = document.getElementById('circle');
  console.log('animate')
  intervalObj = setInterval(function() {
  	if (progress === 0 || progress > 100) {
    	elm.style.backgroundImage = "none";
      progress = 0;
    }
    if (progress === 50) {
    	elm.style.backgroundImage = 'linear-gradient(90deg, white 50%, transparent 50%)';
    } else if (progress < 50) {
    	elm.style.backgroundImage = 'linear-gradient('+(90 + (360*progress/100))+'deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%)';
    } else {
    	elm.style.backgroundImage = 'linear-gradient(90deg, transparent 50%, green 50%),linear-gradient('+(270 + (360*progress/100))+'deg, white 50%, transparent 50%)';
    }
    progress++;
  }, 32);
}

function pauseAnimation() {
	clearInterval(intervalObj);
}
document.querySelector('circle').addEventListener('click', pauseAnimation);

if (document.readyState === 'complete') {
animate();
} else {
document.addEventListener('DOMContentLoaded', animate);
}