css 渐变色进度条

 效果：

 代码：

<!-- 进度条 -->
<view class="progress-box">
	<view class="progress" :style="{width: pogressWitdh + '%'}">
	</view>
</view>

created() {
	// 只是模拟进度
	setInterval(() => {
		if (this.pogressWitdh < 100 ) {
			this.pogressWitdh = this.pogressWitdh + 10 
		} else {
			this.pogressWitdh = 100
		}
	}, 1000)
},

progress-box {
	margin-left: 20rpx;
	margin-right: 20rpx;
	width: 546rpx;
	height: 30rpx;
	border-radius: 15rpx;
	background: #eadedd;
	box-shadow: 0px 0rpx 2rpx 4rpx #eadedd;
}

.progress {
    // 没有变量width之前的占位
	width: 30rpx;
	height: 30rpx;
	background: linear-gradient(to right, #FB3448, #E04AAA, #C8EEFF);
	border-radius: 15rpx;
	transition: all 0.4s ease;
}