svg逆时针读取进度 

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

 

posted @ 2021-11-09 15:59  ronle  阅读(104)  评论(0)  编辑  收藏  举报