css画半圆进度条

效果预期：半圆进度条白底，蓝色进度，随着分数的增长蓝色进度条增长。

      <div class="circle">
          <div id="top-score" class="top"></div>
          <div class="mask"></div>
      </div>

CSS：

.top{
  width: 400px;
  height: 400px;
  top:-1px;
  background: #F1F5F8;
  border-radius: 50%;
  position: absolute;
  transition:2.5s ease-out ;
  transform: rotate(0deg);
  clip:rect(0,auto,200px,auto);
}
.mask{
  width: 340px;
  height: 340px;
  line-height: 340px;
  border-radius: 50%;
  position: absolute;
  left: 30px;
  top: 30px;
  background: #fff;
  clip: rect(0,auto,170px,auto);
}
.circle{
  width: 400px;
  height: 400px;
  position: absolute;
  left: 80px;
  top:15px;
  clip:rect(0,auto,199px,auto);
  border-radius: 50%;
  background: #298CF1;
}

js：

  $(function () {
    var textScore = $('#security-score').text();
    textScore = 'rotate' + '(' + ((textScore/100)*180 + 'deg')+ ')';
    $('#top-score').css('transform',textScore);
  });

最终效果：