环形进度条第2种实现

dabblet.css

/**
 * 环形进度条第2种实现
 */
body, html { height:100%;}
body { display:flex;justify-content:center;align-items:center;}
.controls { margin-top: 2em;text-align:center; }

.circle-progress {
  position: relative;
  width: 10em;
  height: 10em;
  margin: auto;
  border-radius: 50%;

}

.circle-progress .num {
  position:absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
  overflow: hidden;
  border-radius: 50%;
  border: 1px soid #eee;
  background: #eee;
  text-align: center;
  line-height: 4em;
  font-size: 2em;
  font-family: tahoma;
}

.circle-progress i {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width:10em;
  height: 10em;
  border: 1em solid;
  border-color: transparent transparent navy navy;
  border-radius: 50%;
  transform: rotate(45deg);
}
.circle-progress i:nth-child(1) {
  z-index: 2;
  border-color: transparent transparent #fff #fff;
}

.circle-progress i.right {
  border-color: navy navy transparent transparent;
}

.circle-progress i:nth-child(2) {
  transform: rotate(45deg);
}

.circle-progress i:nth-child(3) {
  z-index: 3;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  width: auto;
  height: auto;
  border: 2px solid #fff;
}

dabblet.html

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

<div class="controls">
  <p>进度：<input class="progress" type="range" min="0" max="100" value="0" /></p>
  <p>大小：<input class="size" type="range" min="12" max="64" value="10" /></p>
</div>
</div>

dabblet.js

var progressbar = document.querySelector('.circle-progress i:nth-child(2)');
var mask = document.querySelector('.circle-progress i:nth-child(1)');
var num = document.querySelector('.circle-progress .num');

document.querySelector('.progress').addEventListener('change',
function() {
  var deg = 3.6 * this.value + 45;
  if (this.value >= 50 && !mask.className) {
    mask.className = 'right';
  } else if (this.value < 50 && mask.className) {
    mask.className = '';
  }
  num.innerHTML = this.value;
  progressbar.style.webkitTransform = 'rotate(' + deg + 'deg)';
}, false);

document.querySelector('.size').addEventListener('change',
function() {
  document.querySelector('.circle-progress').style.fontSize = this.value + 'px';
}, false);

settings.json

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