circular progress

by Lazaro Contreras

HTML

<audio controls src="https://a.tumblr.com/tumblr_nyag1wXeQs1sdvzwso1.mp3"></audio>
<div class="bar">
  <div class="part1">
    <div class="pro1"></div>
  </div>
  <div class="part2">
    <div class="pro2"></div>
  </div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
.bar{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}
.part1, .part2{
  display: inline-block;
  position: relative;
  left: 0;
  float: left;
  width: 25px;
  height: 50px;
  overflow: hidden;
}
.pro1, .pro2{
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  border: 5px solid rgba(256, 0, 0, 0.4);
  border-top:5px solid red;
  border-right:5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.pro2{
  left: -25px;
  transform: rotate(225deg);
}

JavaScript

var media = document.querySelector('audio');
var pro1 = document.querySelector('.pro1');
var pro2 = document.querySelector('.pro2');
media.ontimeupdate = function(){
	var mitad = this.duration / 2;
	if(this.currentTime > mitad){
  	var value = ((this.currentTime - mitad) * 360 / this.duration) + 45;
  	pro1.style.transform = 'rotate('+ value +'deg)';
    pro2.style.transform = 'rotate(45deg)';
  } else{
  	var value = (this.currentTime * 360 / this.duration) + 225;
  	pro1.style.transform = 'rotate(45deg)';
    pro2.style.transform = 'rotate('+ value +'deg)';
  }
}