【js - svg】环形进度条环形进度条环形进度条环形进度条环形进度条环形进度条环形进度条环形进度条环形进度条环形进度条

页面效果
动画.gif
完整代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形进度条</title>
    <style>
        circle {
            stroke-width: 10px;
            stroke: rgb(66, 66, 66);
            transform-origin: center;
        }
        
        .p-background {
            stroke: rgba(158, 145, 145, 0.5);
            transform: scale(0.9);
        }
        
        .p-bar {
            stroke: rgb(228, 127, 49);
            /* 旋转-90° */
            transform: rotate(-90deg) scale(0.9);
        }
        
        span {
            position: relative;
            left: -70px;
            bottom: 45px;
        }
        
        input {
            width: 150px;
            height: 30px;
        }
        
        button {
            width: 80px;
            height: 35px;
        }
    </style>
</head>

<body>
    <!-- viewBox：横轴、竖轴、截取SVG上宽高为100大小 设置这个viewBox属性可以更改SVG的宽高，也就是显示在页面上SVG的大小-->
    <svg width="100" height="100" viewBox="0 0 100 100">
    <!-- 第一个circle用来表示整个进度条，第二个为走过的进度 -->
    <!-- r：半径 cx 、cy：坐标  fill="transparent"透明-->
    <circle r="50" cx="50" cy="50" fill="transparent" class="p-background"></circle>
    <circle r="50" cx="50" cy="50" fill="transparent" stroke-dasharray="314" stroke-dashoffset="200" class="p-bar">
    </circle>
  </svg>
    <span>0%</span>
    <br>
    <input type="number" min="0" max="100" oninput="if (value < 0) value = 0;if(value>100)value=100" placeholder="输入0~100的数字">
    <button class="btn">确认</button>
    <!------------------------------ js代码------------------------------------------------- -->
    <script>
        // 第二个 circle 标签
        const circle = document.querySelector('.p-bar')
        const input = document.querySelector('input')
        const btn = document.querySelector('.btn')
        const span = document.querySelector('span')
        // 获取 circle 的半径
        let circleR = circle.getAttribute('r')
        // 设置背景进度条为满状态  也就是圆周长：2πr
        let dashArray = circle.setAttribute("stroke-dasharray", 2 * Math.PI * circleR);
        // 获取圆周长值
        let dashArrayNumber = circle.getAttribute('stroke-dasharray')
        // 确认按钮点击
        btn.addEventListener('click', function() {
            span.innerText = input.value + '%'
                // 1、由于dashoffset数值越大，反而占比越小，所以用 100-value ，value为输入框输入的数字
                // 2、计算value占100的比值，比值乘满进度条的值，获得页面的进度条效果
            circle.setAttribute("stroke-dashoffset", (100 - input.value) / 100 * dashArrayNumber);
        })
    </script>
</body>

</html>