vue 实现进度条效果
这里实现进度条用到了es6语法的模版字符串,通过更改css样式实现正常显示进度的进度条和一种显示剩余余额的进度条:html代码不需要改变:<div class="scheduleCont_1_left_1" :class="10 >= 100 ? 'nobg' : ''">//10为展示的进度,100为总的进度数量<div :style="{ width: `${(10 /
·
这里实现进度条用到了es6语法的模版字符串,通过更改css样式实现正常显示进度的进度条和一种显示剩余余额的进度条:
html代码不需要改变:
<div class="scheduleCont_1_left_1" :class="10 >= 100 ? 'nobg' : ''">
//10为展示的进度,100为总的进度数量
<div :style="{ width: `${(10 / 100).toFixed(2) * 100}%` }" class="un_xg_1_3_1"></div>
</div>
正常显示进度的进度条:
.scheduleCont_1_left_1{
position: relative;
width: 100%;
height: 0.36rem;
background: #E9BBFF;
border-radius: 50px;
overflow: hidden;
.un_xg_1_3_1 {
position: absolute;
top: 0;
left: -1px;
width: 0;
height: 0.36rem;
border-radius: 50px;
background-image: linear-gradient(to right, #B72DF7);
}
}
显示剩余余额的进度条:
.scheduleCont_1_left_1 {
position: relative;
width: 100%;
height: .24rem;
background: #ebebeb;
border-radius: 50px;
overflow: hidden;
.un_xg_1_3_1 {
float: right;
height: .24rem;
border-radius: 50px;
background-image: linear-gradient(to right, #ff6666);
}
}
结束!
感谢大家支持哦
更多推荐
已为社区贡献6条内容
所有评论(0)