这里写的是小程序里面的，如果需要在其他地方写，将view改成div。
思路是：
1.一个背景box，一个进度条box，还有一个展示进度的text
2.进度条的宽度根据传入的进度来设置，需要注意宽度百分比是string类型
3.进度条的样式可以做个动画或者渐变之类的，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);
实现如下：
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
扩展
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
