圆形进度条

svg

by Robbie Yang

HTML

<svg id="circleProcess" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="50%" cy="50%" r="40%" stroke-width="10%"></circle>
</svg>
<input id="range" type="range" min="0" max="255" step="1" value="0">

CSS

#circleProcess {
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  stroke-dasharray: 255%;
  stroke-dashoffset: 255%;
  stroke: #6FEC6F;
  fill: none;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

JavaScript

var circleProcess = document.getElementById("circleProcess");
var circle = document.getElementById("circle");
var range = document.getElementById("range");

var rangeValue;

range.oninput = function() {
  rangeValue = Number(range.value);
  circle.setAttribute("stroke-dashoffset", (255 - rangeValue) + "%");
}