DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>title>
head>
<body>
<svg width="56" height="56" viewbox="0 0 56 56">
<circle cx="28" cy="28" r="25" stroke-width="6" stroke="#DAF8EB" stroke-linejoin="round" stroke-linecap="round" fill="none">circle>
<circle class="progress" cx="28" cy="28" r="25" stroke-width="6" stroke="#05CE78" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dasharray="0 158">circle>
svg>
<p>拖我：<input id="range" type="range" min="0" max="100" value="0" style="width:300px;">p>
body>
html>
.progress {
transition: stroke-dasharray linear .25s;
}
svg {
transform: scaleX(-1) rotate(-90deg);
}
if (window.addEventListener) {
var range = document.querySelector("#range"), circle = document.querySelectorAll("circle")[1];
if (range && circle) {
range.addEventListener("change", function() {
var percent = this.value / 100, perimeter = Math.PI * 2 * 25;
if (percent !== 0) {
circle.style.display = 'inline'
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
} else {
circle.style.display = 'none'
}
});
}
}