环形加载百分比

效果

<html>
<head>
  <meta charset="UTF-8">
  <title>环形进度</title>
  <style>
    #svg {
      transform: rotate(90deg);
    }
    #svg circle {
      stroke-dasharray: 314;
      fill: none;
      transition: all .3s;
    }


  </style>
</head>
<body>
  <input id="ipt" type="text" placeholder="输入0~100，表示百分比">
  <svg id="svg" width="200" height="200">
    <circle id="circle" cx="100" cy="100" r="50" stroke="red" stroke-width="10"  stroke-linecap="round" stroke-dashoffset="314"></circle>

  </svg>
  <script>
    var ipt = document.querySelector('#ipt')
    var circle = document.querySelector('#circle')
    ipt.oninput = function(){
      var percent = parseInt(this.value)/100
      var offset = parseInt(2*Math.PI*50*(1-parseInt(this.value)/100))
      console.log(offset)
      circle.setAttribute('stroke-dashoffset', offset)
    }
  </script>
</body>
</html>

results matching ""

    No results matching ""