這里寫的是小程序里面的，如果需要在其他地方寫洲赵，將view改成div。
思路是：
1.一個(gè)背景box商蕴，一個(gè)進(jìn)度條box叠萍，還有一個(gè)展示進(jìn)度的text
2.進(jìn)度條的寬度根據(jù)傳入的進(jìn)度來設(shè)置，需要注意寬度百分比是string類型
3.進(jìn)度條的樣式可以做個(gè)動(dòng)畫或者漸變之類的绪商，animation keyframes
html
<view class="progress-bar">
<text class="progress-text">{{progress.val}}/{{progress.total}}</text>
<view class="progress-bg" :style={width:progress.width}></view>
</view>
js
progress:{
val:20,
total:50,
width:''// 寬度百分比是string類型
},
let {val,total } = this.progress
this.progress.width = val/total*100+'%'
console.log(this.progress.width)
css
.progress-bar {
width: 100%;
height: 1rem;
overflow: hidden;
box-sizing: border-box;
border-radius: 24px;
background-color: #FF9800;
position: relative;
}
.progress-bg {
height: 100%;
overflow: hidden;
box-sizing: border-box;
background-image: linear-gradient(120deg, #FF9800 50%, #FFC107 0 25%,#FF9800 0 50%, #FFC107 0);
border-radius: 24px;
animation: asx 20s linear infinite;
background-size: 32px 100%;
}
.progress-text{
color: #fff;
font-size: 12px;
position: absolute;
right: 1rem;
z-index: 22;
}
@keyframes asx {
to {
background-position: 200% 0;
}
}
//background-image: linear-gradient(135deg, #00BFFF 25%, #FA8072 0, #FA8072 50%, #00BFFF 0, #00BFFF 75%, #FA8072 0);
實(shí)現(xiàn)如下：
background-image: linear-gradient(120deg, #FF9800 50%, #FFC107 0 25%,#FF9800 0 50%, #FFC107 0);.png
background-image: linear-gradient(135deg, #00BFFF 25%, #FA8072 0, #FA8072 50%, #00BFFF 0, #00BFFF 75%, #FA8072 0);.png
擴(kuò)展
linear-gradient(90deg,
#5461c8 12.5%,
#c724b1 0 25%,
#e4002b 0 37.5%,
#ff6900 0 50%,
#f6be00 0 62.5%,
#97d700 0 75%,
#00ab84 0 87.5%,
#00a3e0 0)
image.png
