前端开发之：js+svg实现圆形进度条~

css样式代码：

 .osvg{
            position: absolute;
            inset: 0; /* 上下左右四个方向都设置为0 */
            margin: auto;
        }
        .oround{
            fill:transparent;
            stroke-width: 12;
            stroke:#00cb4c;
            stroke-dasharray:628; /* stroke-dasharray:第一个值表示分割的长度 第二个值是分割的间隔*/
            stroke-dashoffset:0; /* 表示总长度减去stroke-dashoffset剩下在页面显示的长度 列如：总长度 300，stroke-dashoffset：100，页面显示200*/
        }
        text{
            font-size:21;
            stroke:#00cb4c;
            text-anchor:middle;
            alignment-beseline:middle;
        }

html代码：

 <svg width="300" height="300" class="osvg">
        <circle class="oround" cx="150" cy="150" r="100"/>
        <text x="150" y="150">0%</text>
    </svg>

js代码：

<script>
        let oround = document.querySelector('.oround');
        let otext = document.querySelector('text');
        let olength  = oround.getTotalLength();//etTotalLength:获取图形总长度
        let loadingArr = [];
       
        for(let i = 0; i <=100; i++){
            loadingArr.push(i)
        }
        let index = 0;
        let timer = setInterval(() =>{
            oround.style.strokeDashoffset =  olength - 
            olength * (loadingArr[index]/100);
            otext.textContent = `${loadingArr[index]}%`
            index ++;
            if(index === loadingArr.length){
                clearInterval(timer);
                otext.textContent = "加载完毕"
            }
        },80);


    </script>

效果：

svg+js圆形进度条效果

参考来源：5.89 xfb:/ 每天学点前端，svg+js 圆形进度条效果~# 网页设计 # 前端 # html # javascript # 互联网技术 https://v.douyin.com/ABo1t19/ 复制此链接，打开Dou音搜索，直接观看视频！