svg实现圆环进度条

时间：2024-04-17 17:05:08

开源实现：https://github.com/lugolabs/circles

自行实现：圆环与svg画布间剩的空间太多。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>圆环进度条</title>

<style type="text/css">

circle{

  -webkit-transition: stroke-dasharray .25s;

  transition: stroke-dasharray .25s;

}

</style>

<script>

window.onload = function () {

  if (window.addEventListener) {

    var range = document.querySelector("#range");

    var circle = document.querySelectorAll("circle")[1];

    if (range && circle) {

      range.addEventListener("change", function () {

        console.log(this.value,2*Math.PI*50);

        var percent = this.value / 100, lineLength = 2*Math.PI * 50;

        circle.setAttribute('stroke-dasharray', lineLength* percent + " " + lineLength * (1 - percent));

      });

    }

  }

}

</script>

</head>

<body>

<svg width="200" height="200">

  <circle cx="100" cy="100" r="50" stroke-width="10" stroke="#D1D3D7" fill="none"></circle>

  <circle cx="100" cy="100" r="50" stroke-width="10" stroke="#00A5E0" fill="none"  stroke-dasharray="0 50">

  </circle>

</svg>

<p>拖我：<input id="range" type="range" min="0" max="100" value="0" style="width:300px;"></p>

</body>

</html>

相关文章