svg实现圆环进度条

Posted 2022-10-22 94pm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于svg实现圆环进度条的主要内容，如果未能解决你的问题，请参考以下文章

CSS 奇技淫巧Box-shadow实现圆环进度条