CSS-线性渐变无畸变-环形普通进度条-环形能量块进度条-局部环形普通进度条
1.线性渐变(无畸变)2.线性能量条-进度条3.环形普通-进度条4.环形能量条-进度条5.局部环形普通-进度条6.完整HTML文件代码7.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>
