<!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="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' } }); } }