JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="content">
  <div class="part1">
    <div progress1></div>
  </div>
  <div class="part2">
    <div progress2></div>
  </div>
</div>
<audio controls autoplay src="https://a.tumblr.com/tumblr_nyag1wXeQs1sdvzwso1.mp3"></audio>

CSS

.content{
  position: absolute;
  display: block;
  top: calc(50% - 50px);
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  heeight: 100px;
}
.part1 {
  position: absolute;
  display: inline-block;
  top: 25px;
  left: 50px;
  width: 100px;
  height: 50px;
  overflow: hidden;
  color: black;
  transform: rotate(90deg);
}

.part2 {
  position: absolute;
  display: inline-block;
  top: 25px;
  width: 100px;
  height: 50px;
  overflow: hidden;
  color: black;
  transform: rotate(270deg);
}

[progress1]::after,
[progress2]::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background: white content-box;
  border-radius: 50%;
  box-sizing: border-box;
}

[progress1] {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  background: linear-gradient(rgba(0, 116, 216, 0.3) 50%, rgb(0, 116, 216) 50%);
  border-radius: 50%;
}

[progress2] {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  background: linear-gradient(rgba(0, 116, 216, 0.3) 50%, rgb(0, 116, 216) 50%);
  border-radius: 50%;
}

JavaScript

var pro1 = document.querySelector('[progress1]');
var pro2 = document.querySelector('[progress2]');
var audio = document.querySelector('audio');
audio.ontimeupdate = function() {
  var mitad = (this.duration / 2);
  if (this.currentTime > mitad) {
    pro1.style.transform = 'rotate(' + mitad * 360 / this.duration + 'deg)';
    pro2.style.transform = 'rotate(' + (this.currentTime - mitad) * 360 / this.duration + 'deg)';
  } else {
    pro1.style.transform = 'rotate(' + this.currentTime * 360 / this.duration + 'deg)';
    pro2.style.transform = 'rotate(0deg)';
  }
}