CSS-线性渐变无畸变-环形普通进度条-环形能量块进度条-局部环形普通进度条

1.线性渐变(无畸变)

实现思路：

• 假设基准长度为600px，渐变起始点：rgb(0, 115, 203,1),rgb(0, 115, 203,0)；
• 则50%长度300px，渐变结束点：rgb(0, 115, 203,0.5)；（1 - 300 / 600)；
• 则25%长度150px，渐变结束点：rgb(0, 115, 203,0.75)；(1 - 150 / 600)；
• 综上所述：渐变结束点透明度计算公式：rgba—>a = 1 - 长度 / 基准长度。

代码如下：

        <h1>1.线性渐变(无畸变)</h1>
        <div class="gradient-div">
            <div class="base-div">基准长度渐变</div>
            <div class="half-div">一半长度渐变</div>
            <div class="quarter-div">四分之一长度渐变</div>
        </div>

	    .gradient-div{
	         width: 100%;
	         height: 100px;
	         font-size: 15px;
	         color:white;
	         display: flex;
	         flex-direction: column;
	         align-items: flex-start;
	         justify-content: center;
	     }
	     .base-div{
	         width:600px;
	         height:30px;
	         box-sizing: border-box;
	         background-image: linear-gradient(to right,rgb(0, 115, 203,1),rgb(0, 115, 203,0));
	     }
	     .half-div{
	         width:300px;
	         height:30px;
	         box-sizing: border-box;
	         background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.5));
	     }
	     .quarter-div{
	         width:150px;
	         height:30px;
	         box-sizing: border-box;
	         background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.75));
	     }

2.线性能量条-进度条

实现思路：

• 需要一个外部div和并在其中再编写一个内部div；
• 外部idv充当背景滑轨；
• 内部div使用设定背景宽高的间隔重复渐变，即是能量块式进度条；
• 控制内部div的长度即可控制“进度”。

代码如下：

        <h1>2.线性能量条-进度条</h1>
        <div class="outside-div">
            <div class="inside-div"></div>
        </div>

        .outside-div{
            width: 600px;
            height: 30px;
            box-sizing: border-box;
            background-color: rgb(211, 246, 246);
            border-radius: 15px;

            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }
        .inside-div{
            width: 400px;
            height: 30px;
            margin-top: 6px;
            margin-bottom: 6px;
            margin-left: 15px;
            margin-right: 25px;
            box-sizing: border-box;
            
            background-image: linear-gradient(to right,rgb(51, 89, 227) 12px,rgb(211, 246, 246) 4px);
            background-repeat: repeat;
            background-size: 16px 100%;
        }

3.环形普通-进度条

实现思路：

• 需要一个外部div和一个内部div，且内部div比外部小充当遮罩；
• 外部div使用conic-gradient，渐变颜色只有两种：一是进度色，二是底色；
• 内部div使用白色进行遮罩，形成环形；
• 控制外部div进度色的结束角度即可控制“进度”。

代码如下：

        <h1>3.环形普通-进度条</h1>
        <div class="progress-div">
            <div class="insidemask-div">40%</div>
        </div>

        .progress-div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgb(211, 246, 246);

            border-radius: 150px;

            background:conic-gradient(from  180deg, red 0deg, red 150deg,rgb(211, 246, 246) 0deg);
        }
        .insidemask-div{
            width: 280px;
            height: 280px;
            box-sizing: border-box;

            border-radius: 140px;
            background-color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: bold;;
        }

4.环形能量条-进度条

实现思路：

• 需要一个外部div和一个内部div，且内部div比外部小充当遮罩；
• 外部div使用conic-gradient，渐变颜色只有两种：一是能量块色，二是间隔色块，两种颜色的为一组基本单位。
• 内部div使用白色进行遮罩，形成环形；
• 控制外部div的“组”的个数即可控制“进度”，通过js的模板字符串循环构造组的个数，使用DOM操作设置conic-gradient其参数即可。

代码如下：

        <h1>4.环形能量条-进度条</h1>
        <div class="split-progress-div">
            <div class="split-insidemask-div"></div>
        </div>

        .split-progress-div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            border-radius: 150px;
        }
        .split-insidemask-div{
            width: 280px;
            height: 280px;

            border-radius: 150px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: bold;;
        }

        const circleEngry = function(num){
            let splitString = "white 0 360deg";
            if(num >= 1){
                let anum = 10;

                const toab = function(anum){
                    return [`#80FFFF ${anum - 10}deg,#80FFFF ${anum - 5}deg`,`,white ${anum - 5}deg,white ${anum}deg`];
                };
                
                splitString = "";
                for(let i = 0;i < num;i++){
                    if(i != 0){
                        splitString = splitString + "," + toab(anum)[0] + toab(anum)[1];
                    }
                    else{
                        splitString = toab(anum)[0] + toab(anum)[1];
                    }
                    
                    anum = anum + 10;

                }
            }

            //console.log(splitString);
            let splitProgressDiv = document.getElementsByClassName('split-progress-div');
            let splitInsidemaskDiv = document.getElementsByClassName('split-insidemask-div');
            splitProgressDiv[0].style = `background:conic-gradient(${splitString}); `;
            splitInsidemaskDiv[0].innerHTML = (num / 36 * 100).toFixed(2) + "%";
        }

5.局部环形普通-进度条

实现思路：

• 需要一个外部div和一个内部div，且内部div比外部小充当遮罩；
• 外部div使用conic-gradient，渐变颜色只有两种：一是进度色，二是底色，设置渐变起始角度为某值，底色的结束角度位置与前述起始角度位置对称，剩余角度直到360°都设置为white；
• 内部div使用白色进行遮罩，形成环形；
• 控制外部div进度色的结束角度即可控制“进度”。

代码如下：

        <h1>5.局部环形普通-进度条</h1>
        <div class="sub-progress-div">
            <div class="sub-insidemask-div"></div>
        </div>

        .sub-progress-div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background:conic-gradient(from  210deg, blue 0deg, blue 100deg,rgb(211, 246, 246) 100deg,rgb(211, 246, 246) 300deg,white 300deg);
            border-radius: 150px;
        }
        .sub-insidemask-div{
            width: 280px;
            height: 280px;

            border-radius: 150px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: bold;;
        }

6.完整HTML文件代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta http-equiv="Content-Type" charset=UTF-8">
        <style>
            .gradient-div{
                width: 100%;
                height: 100px;

                font-size: 15px;
                color:white;

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
            }
            .base-div{
                width:600px;
                height:30px;
                box-sizing: border-box;
                background-image: linear-gradient(to right,rgb(0, 115, 203,1),rgb(0, 115, 203,0));
            }
            .half-div{
                width:300px;
                height:30px;
                box-sizing: border-box;
                background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.5));
            }
            .quarter-div{
                width:150px;
                height:30px;
                box-sizing: border-box;
                background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.75));
            }

            .outside-div{
                width: 600px;
                height: 30px;
                box-sizing: border-box;
                background-color: rgb(211, 246, 246);
                border-radius: 15px;

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
            }
            .inside-div{
                width: 400px;
                height: 30px;
                margin-top: 6px;
                margin-bottom: 6px;
                margin-left: 15px;
                margin-right: 25px;
                box-sizing: border-box;
                
                background-image: linear-gradient(to right,rgb(51, 89, 227) 12px,rgb(211, 246, 246) 4px);
                background-repeat: repeat;
                background-size: 16px 100%;

            }

            .progress-div{
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: rgb(211, 246, 246);

                border-radius: 150px;

                background:conic-gradient(from  180deg, red 0deg, red 150deg,rgb(211, 246, 246) 0deg);
            }
            .insidemask-div{
                width: 280px;
                height: 280px;
                box-sizing: border-box;

                border-radius: 140px;
                background-color: white;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: bold;;
            }

            .split-progress-div{
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                border-radius: 150px;
            }
            .split-insidemask-div{
                width: 280px;
                height: 280px;

                border-radius: 150px;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: bold;;
            }
            .sub-progress-div{
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background:conic-gradient(from  210deg, blue 0deg, blue 100deg,rgb(211, 246, 246) 100deg,rgb(211, 246, 246) 300deg,white 300deg);
                border-radius: 150px;
            }
            .sub-insidemask-div{
                width: 280px;
                height: 280px;

                border-radius: 150px;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: bold;;
            }
        </style>
    </head>
    <body>
        <h1>1.线性渐变(无畸变)</h1>
        <div class="gradient-div">
            <div class="base-div">基准长度渐变</div>
            <div class="half-div">一半长度渐变</div>
            <div class="quarter-div">四分之一长度渐变</div>
        </div>
        <h1>2.线性能量条-进度条</h1>
        <div class="outside-div">
            <div class="inside-div"></div>
        </div>
        <h1>3.环形普通-进度条</h1>
        <div class="progress-div">
            <div class="insidemask-div">40%</div>
        </div>
        <h1>4.环形能量条-进度条</h1>
        <div class="split-progress-div">
            <div class="split-insidemask-div"></div>
        </div>
        <h1>5.局部环形普通-进度条</h1>
        <div class="sub-progress-div">
            <div class="sub-insidemask-div"></div>
        </div>
        <script>
            const circleEngry = function(num){
                let splitString = "white 0 360deg";
                if(num >= 1){
                    let anum = 10;

                    const toab = function(anum){
                        return [`#80FFFF ${anum - 10}deg,#80FFFF ${anum - 5}deg`,`,white ${anum - 5}deg,white ${anum}deg`];
                    };
                    
                    splitString = "";
                    for(let i = 0;i < num;i++){
                        if(i != 0){
                            splitString = splitString + "," + toab(anum)[0] + toab(anum)[1];
                        }
                        else{
                            splitString = toab(anum)[0] + toab(anum)[1];
                        }
                        
                        anum = anum + 10;

                    }
                }

                //console.log(splitString);
                let splitProgressDiv = document.getElementsByClassName('split-progress-div');
                let splitInsidemaskDiv = document.getElementsByClassName('split-insidemask-div');
                splitProgressDiv[0].style = `background:conic-gradient(${splitString}); `;
                splitInsidemaskDiv[0].innerHTML = (num / 36 * 100).toFixed(2) + "%";
            };
            circleEngry(14);
        </script>
    </body>
</html>

7.CSS运行效果