在開發(fā)中, 時不時會遇到寫進度條的功能, 比如投票比例, 視頻播放進度, 文件上傳進度...
需求分析
如果需要考慮兼容性的話，使用css3漸變并不是最好的方案;
具體兼容大家可以自行查看 Can i use radial-gradient;
使用了 自定義屬性 和 線性漸變 和 徑向漸變
實現效果
用css3漸變背景實現進度條
代碼：
html部分
<div class="progress"></div>
css部分
.progress {
--color: green;
--percentage: 50;
height: 50px;
border-radius: 30px;
background-color: rgba(0, 0, 0, .1);
width: 100%;
background-image: radial-gradient(
closest-side circle at calc(var(--percentage) * 1%),
var(--color),
var(--color) 100%,
transparent),
linear-gradient(var(--color), var(--color));
background-size: 100%, calc(var(--percentage) * 1%);
background-repeat: no-repeat;
}
屬性介紹
radial-gradient
background: radial-gradient(center, shape, size, start-color, ..., last-color);
center : 漸變起點的位置赤嚼，可以為百分比，默認是圖形的正中心沥阱。
shape : 漸變的形狀，ellipse表示橢圓形伊群，circle表示圓形考杉。默認為ellipse，如果元素形狀為正方形的元素舰始，則ellipse和circle顯示一樣崇棠。
size : 漸變的大小，即漸變到哪里停止丸卷，它有四個值枕稀。
closest-side
- 最近邊 :
closest-side - 最遠邊 :
farthest-side - 最近角 :
closest-corner - 最遠角 :
farthest-corner
linear-gradient
background: linear-gradient(angle, side-or-corner, color-stop);
angle : 角度
side-or-corner : 描述漸變線的起始點位置 left or right or top or bottom
color-stop : 結束顏色;
第二種實現方法
比較簡單, 貼出來方便自己以后復制 (使用兩個
div實現)
進度條
html部分
<div class="progress-container">
<div class="progress"></div>
</div>
css部分
.progress-container,
.progress-container .progress {
width: 100%;
height: 30px;
border-radius: 15px;
overflow: hidden;
}
.progress-container {
background-color: rgba(0, 0, 0, .1)
}
.progress-container .progress {
width: 30%;
background-color: red;
}
