uniapp实现超简单的进度条样式

实现原理：控制view的宽度来实现进度条的增长和减少

---

上代码

<view class="progress-wrap">
    <!-- 这里的 progressWidth 用来控制进度条的长度-->
	<view class="progress" style="{width: progressWidth + '%',background:'#d64d3b'}"</view>
    <!-- 进度条的百分比 -->
    <view class="percentage">{{progressWidth || 0}}% </view>
</view>
	

---

CSS代码

    .progress-wrap{
		height: 30upx;
		width: 100upx;
		background: #ffc3cb;
		border-radius: 20upx;
		overflow: hidden; 
		position: relative;
	}

    .progress {
		height: 30upx;
	}

    .percentage {
		position: absolute;
		left: 16upx;
		top: 0;
		font-size: 20upx;
		color: #eee;
	}