Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.circle {
  margin: 50px;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .25);
}
.circle-fill-before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  border-radius: 0 50px 50px 0;
  transform-origin: 0 50%
}
.circle-fill-after {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  border-radius: 0 50px 50px 0;
  transform-origin: 0 50%
}
</style>
</head>
<body>

  <div class="circle">
    <div class="circle-fill-before" style="transform: rotate(0deg);background-color: #b700b7;"></div>
    <div class="circle-fill-after" style="transform: rotate(180deg);background-color: #b700b7;"></div>
  </div>

<script id="jsbin-javascript">
var countdown = function (t, u) {
  var fillBefore = document.querySelector('.circle-fill-before');
  var fillAfter = document.querySelector('.circle-fill-after');

  var step = 360 / (t / u);
  var increament = step;

  var id = setInterval(function() {
    if (increament <= 180) {
       fillBefore.style.transform = 'rotate('+ increament +'deg)';
    } else if (increament > 180 && increament <=360) {
      fillBefore.style.transform = 'rotate(0deg)';
      fillBefore.style.backgroundColor = '#fff';
      fillAfter.style.transform = 'rotate('+ increament +'deg)';
    } else {
      fillAfter.style.backgroundColor = '#fff';
      clearInterval(id);
    }
    increament += step;
    console.log(increament);
  }, u * 1000);
}


countdown(10, 1/100);
</script>


<script id="jsbin-source-css" type="text/css">
.circle {
  margin: 50px;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .25);
}
.circle-fill-before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  border-radius: 0 50px 50px 0;
  transform-origin: 0 50%
}
.circle-fill-after {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  border-radius: 0 50px 50px 0;
  transform-origin: 0 50%
} </script>

<script id="jsbin-source-javascript" type="text/javascript">var countdown = function (t, u) {
  var fillBefore = document.querySelector('.circle-fill-before');
  var fillAfter = document.querySelector('.circle-fill-after');

  var step = 360 / (t / u);
  var increament = step;

  var id = setInterval(function() {
    if (increament <= 180) {
       fillBefore.style.transform = 'rotate('+ increament +'deg)';
    } else if (increament > 180 && increament <=360) {
      fillBefore.style.transform = 'rotate(0deg)';
      fillBefore.style.backgroundColor = '#fff';
      fillAfter.style.transform = 'rotate('+ increament +'deg)';
    } else {
      fillAfter.style.backgroundColor = '#fff';
      clearInterval(id);
    }
    increament += step;
    console.log(increament);
  }, u * 1000);
}


countdown(10, 1/100);</script></body>
</html>