环形变色进度条

思路:
svg
两个圆,一个为进度条底色,一个为进度条,使圆环内部填充颜色不可见,设置外部边框线为stroke-dasharray=‘0,xxx’和线宽; 即外边框虚线,且初始时,实线为0，虚线比实线大即可->传入百分比进度即二位整数,动态增加实线的长度,虚线长度一定要比圆环长度长,否则会出现多段实线->在改变实现长度的过程中,通过
rgb的方式,将颜色的竖直和百分比绑定，字体颜色类似,实现进度条变色

精髓:通过圆形外边框虚线的实线部分从0到有的过程，且空白初始占满圆环，且比圆环长度长

其中虚线的起始位置为圆心水平向右的交点,可以通过transform="rotate(-90,圆心x,圆心y)"实现起点位置在顶部

代码示例:

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text{
            text-align: center;
            dominant-baseline:middle;
        }
        body{
            text-align: center;
        }
        .box{
            height: 700px;
            width: 700px;
            margin:0 auto;
        }
    </style>
    
</head>
<body>
    
    <div style="border:solid 1px orange;" class='box'>

        <svg  id='svg' width='100%' height='100%'
        xmlns="http://www.w3.org/2000/svg">

            <!-- 设置底色的圆环 -->
            <circle cx='350' cy='350' r='300' stroke='gray' fill='none' stroke-width='40' stroke-linecap='round'></circle>
           
            <!-- 设置进度条 -->
            <!-- 旋转设置进度条从圆环上顶点开始，即按照圆心(350,350)逆时针旋转90度 -->
            <!--strok-dasharray='0,10000' 只要虚线空白比实现长即可  -->
            <circle class='progress' 
                transform='rotate(-90,350,350)'
                cx='350' cy='350' r='300' fill='none' stroke='red'
                stroke-width='40' stroke-linecap='round' strok-dasharray='0,10000' 
            ></circle>  

            <!-- 设置文本 -->
            <text class='text' x='350' y='350' font-size='200' fill='red' text-anchor='middle'>0</text>
        </svg>
        
    </div>

    <script src='js/index.js'></script>
    <script>
window.onload=function(){

    //命名空间
    let svgNS="http://www.w3.org/2000/svg";

    //获取父级元素
    var div=document.querySelector('.box');
    //获取svg
    let svg=document.querySelector('#svg');


    //创建标签
    function createTag(tag,obj){
        var oTag=document.createElementNS(svgNS,tag);
        for(var attr in obj){
            oTag.setAttribute(attr,obj[attr]);
        }

        return oTag;

    }




}


    </script>
</body>
</html>

js:

//获取进度条
var progressDom = document.querySelector(".progress");
//获取文本对象
var textDom=document.querySelector('.text');

//进度条变化
function rotateCircle(persent){
    //获取svg圆环的总长,通过半径长度算出总长
    var circleLength=Math.floor(2*Math.PI*parseFloat(progressDom.getAttribute('r')));

    //按照百分比算出进度环的长度
    var value=persent*circleLength/100;
    //根据百分比变换颜色
    // 红色255,0,0 蓝色0,191,255 即从红色变换成蓝色
    var red=255+parseInt((0-255)/100*persent);
    var green=0+parseInt((191-0)/100*persent);
    var blue=0+parseInt((255-0)/100*persent);

    //设置虚线的路径和(实线)颜色,空白长度必须比圆环长度长
    progressDom.setAttribute('stroke-dasharray',value+",10000");
    progressDom.setAttribute('stroke',`rgb(${red},${green},${blue})`);

    //设置文本内容颜色
    textDom.innerHTML=persent+'%';
    textDom.setAttribute('fill',`rgb(${red},${green},${blue})`);

}

//定时器,每30毫秒百分比+1;百分比为100时置0
let num=0;
setInterval(()=>{
    num++;
    if(num>100)
    {
        num=0;
    }
    rotateCircle(num);
},30)

神奇大叔

发布了619 篇原创文章 · 获赞 3 · 访问量 2万+

私信关注

猜你喜欢