手写进度条

这里写的是小程序里面的，如果需要在其他地方写，将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