<div class="pie degree">
  <span class="block"></span>
  <span id="time">0</span>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
$tosca:#1fbba6;
body{
  font-family: 'Open Sans', sans-serif;
  font-weight:300;
  background:lighten($tosca,40%);
}
.pie{
    width: 250px;
    height: 250px;
    display: block;
    position: relative;
    border-radius: 50%;
    background-color: $tosca;
    border: 2px solid $tosca;
    float: left;
    margin: 2em;
  .block{
    position:absolute;
    background:#fff;
    width:230px;
    height:230px;
    display:block;
    border-radius:50%;
    top:10px;
    left:10px;
  }

}
#time{
  font-size:3em;
  position:absolute;
  top:35%;
  left:43%;
  color:lighten(#000,60%);
}
.degree{
  /*90 + ( 360 * .1 )*/
      background-image:
        linear-gradient(90deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}
/*
to modify total time, just input on variable totaltime
*/
var totaltime = 60;
function update(percent){
  var deg;
  if(percent<(totaltime/2)){
    deg = 90 + (360*percent/totaltime);
      $('.pie').css('background-image',
                'linear-gradient('+deg+'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)'
               );
  } else if(percent>=(totaltime/2)){
          deg = -90 + (360*percent/totaltime);
          $('.pie').css('background-image',
                'linear-gradient('+deg+'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)'
               );
          }
}
var count = parseInt($('#time').text());
myCounter = setInterval(function () {
  count+=1;
  $('#time').html(count);
    update(count);
  
  if(count==totaltime) clearInterval(myCounter);
}, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js