环形进度条，css bt版

dabblet.css

/**
 * 环形进度条，css bt版
 */
html,body { height:100%; } 
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
} 
.controls {
  margin-top: 4em;
  text-align: center;
}

.circle-progress {
  position: relative;
  width: 10em;
  height: 10em;
  margin:auto;
  font-size: 12px; 
  border-radius: 50%;
  background: #f3f0f3;
}

.circle-progress .num {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  font-size: 3em;
  font-family: tahoma;
  transform: translate3d(-50%, -50%, 0);
}

.circle-progress i {
  position: absolute;
  left: -1em;
  top: -1em;
  right: 50%;
  bottom: 50%;
  overflow: hidden;
  transform-origin: 100% 100%;
}

.circle-progress i:before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  border: 1em solid navy;
}

.percentage-0 i:nth-child(1) { display:none; }
.percentage-0 i:nth-child(2) { display:none; }
.percentage-0 i:nth-child(3) { display:none; }
.percentage-0 i:nth-child(4) { display:none; }

.percentage-10 i:nth-child(1) { transform: skewX(60deg); }
.percentage-10 i:nth-child(1):before { transform: skewX(-60deg); }
.percentage-10 i:nth-child(2) { display:none; }
.percentage-10 i:nth-child(3) { display:none; }
.percentage-10 i:nth-child(4) { display:none; }

.percentage-20 i:nth-child(1) { transform: skewX(30deg); }
.percentage-20 i:nth-child(1):before { transform: skewX(-30deg); }
.percentage-20 i:nth-child(2) { display:none; }
.percentage-20 i:nth-child(3) { display:none; }
.percentage-20 i:nth-child(4) { display:none; }

.percentage-30 i:nth-child(1) { transform: skewX(0deg); }
.percentage-30 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-30 i:nth-child(2) { transform: rotate(90deg) skewX(60deg); }
.percentage-30 i:nth-child(2):before { transform: skewX(-60deg); }
.percentage-30 i:nth-child(3) { display:none; }
.percentage-30 i:nth-child(4) { display:none; }

.percentage-40 i:nth-child(1) { transform: skewX(0deg); }
.percentage-40 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-40 i:nth-child(2) { transform: rotate(90deg) skewX(30deg); }
.percentage-40 i:nth-child(2):before { transform: skewX(-30deg); }
.percentage-40 i:nth-child(3) { display:none; }
.percentage-40 i:nth-child(4) { display:none; }

.percentage-50 i:nth-child(1) { transform: skewX(0deg); }
.percentage-50 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-50 i:nth-child(2) { transform: rotate(90deg) skewX(0deg); }
.percentage-50 i:nth-child(2):before { transform: skewX(0deg); }
.percentage-50 i:nth-child(3) { display:none; }
.percentage-50 i:nth-child(4) { display:none; }

.percentage-60 i:nth-child(1) { transform: skewX(0deg); }
.percentage-60 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-60 i:nth-child(2) { transform: rotate(90deg) skewX(0deg); }
.percentage-60 i:nth-child(2):before { transform: skewX(0deg); }
.percentage-60 i:nth-child(3) { transform: rotate(180deg) skewX(30deg); }
.percentage-60 i:nth-child(3):before { transform: rotate(180deg) skewX(-30deg); }
.percentage-60 i:nth-child(4) { display:none; }

.percentage-70 i:nth-child(1) { transform: skewX(0deg); }
.percentage-70 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-70 i:nth-child(2) { transform: rotate(90deg) skewX(0deg); }
.percentage-70 i:nth-child(2):before { transform: skewX(0deg); }
.percentage-70 i:nth-child(3) { transform: rotate(180deg) skewX(0deg); }
.percentage-70 i:nth-child(3):before { transform: rotate(180deg) skewX(0deg); }
.percentage-70 i:nth-child(4) { display:none; }

.percentage-80 i:nth-child(1) { transform: skewX(0deg); }
.percentage-80 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-80 i:nth-child(2) { transform: rotate(90deg) skewX(0deg); }
.percentage-80 i:nth-child(2):before { transform: skewX(0deg); }
.percentage-80 i:nth-child(3) { transform: rotate(180deg) skewX(0deg); }
.percentage-80 i:nth-child(3):before { transform: rotate(180deg) skewX(0deg); }
.percentage-80 i:nth-child(4) { transform: rotate(270deg) skewX(60deg); }
.percentage-80 i:nth-child(4):before { transform: skewX(-60deg); }

.percentage-90 i:nth-child(1) { transform: skewX(0deg); }
.percentage-90 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-90 i:nth-child(2) { transform: rotate(90deg) skewX(0deg); }
.percentage-90 i:nth-child(2):before { transform: skewX(0deg); }
.percentage-90 i:nth-child(3) { transform: rotate(180deg) skewX(0deg); }
.percentage-90 i:nth-child(3):before { transform: rotate(180deg) skewX(0deg); }
.percentage-90 i:nth-child(4) { transform: rotate(270deg) skewX(30deg); }
.percentage-90 i:nth-child(4):before { transform: skewX(-30deg); }

.percentage-100 i:nth-child(1) { transform: skewX(0deg); }
.percentage-100 i:nth-child(1):before { transform: skewX(0deg); }
.percentage-100 i:nth-child(2) { transform: rotate(90deg) skewX(0deg); }
.percentage-100 i:nth-child(2):before { transform: skewX(0deg); }
.percentage-100 i:nth-child(3) { transform: rotate(180deg) skewX(0deg); }
.percentage-100 i:nth-child(3):before { transform: rotate(180deg) skewX(0deg); }
.percentage-100 i:nth-child(4) { transform: rotate(270deg) skewX(0deg); }
.percentage-100 i:nth-child(4):before { transform: skewX(0deg); }

dabblet.html

<div class="demo">
<div class="circle-progress percentage-0">
<i></i><i></i><i></i><i></i>
<div class="num">0</div>
</div>

<div class="controls">
进度：<input class="circle-value" type="range" min="0" max="100" value="0"> <br>
大小：<input class="circle-size" type="range" min="12" max="64" value="0">
<p>chrome/safari only啊〜
</div>
</div>

dabblet.js

var progressbar = document.querySelector('.circle-progress');

document.querySelector('.circle-value')
        .addEventListener('change', function() {
          var n = ((this.value / 10)|0) * 10;
          progressbar.querySelector('.num').innerHTML = n;
          progressbar.className = 'circle-progress percentage-' + n;
        }, false);
        
document.querySelector('.circle-size')
        .addEventListener('change', function() {
          progressbar.style.fontSize = this.value + 'px';
        }, false);

settings.json

{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"result"}