JSFiddle - React, Tailwind, and code Playground

by samunplugged

HTML

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

<circle id="circle" />

CSS

pie, circle {
    width: 5em;
    height: 5em;
    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: 4em;
  height: 4em;
  display: block;
  border-radius: 50%;
  background-color: white;
  border: 0px solid transparent;
  margin: 1em;
  position: absolute;
  z-index: 2;
  left: -0.5em;
  top: -0.5em;
}

.ten {
    background-image:
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
    background-image:
        linear-gradient(180deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
    background-image:
        linear-gradient(90deg, white 50%, transparent 50%);
}

/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
    background-image:
        linear-gradient(116deg, transparent 50%, green 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

@keyframes circle {
  0% {
    background-image:
        linear-gradient(180deg, transparent 50%, green 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
  }
  99% {
    background-image:
        linear-gradient(180deg, transparent 50%, green 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
  }
  100% {
    background-image: none;
  }
}

.onehundred {
    background-image: none;
}

JavaScript

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

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