vue 制作进度条
简易的进度条,百分比显示在进度条上,代码如下:HTML:<div class="progressContainer"><div class="progress" :style="{width:progress+'%'}"><b>{{progress}}%&
·
简易的进度条,百分比显示在进度条上,代码如下:
HTML:
<div class="progressContainer">
<div class="progress" :style="{width:progress+'%'}">
<b>{{progress}}%</b>
</div>
</div>
css:
div.progressContainer{
height: 20px;
width: 96%;
border-radius: 10px;
background-color: #ddd;
margin-left: 2%;
}
div.progress{
background-color: #1C8DE0;
border-radius: 10px;
height:20px;
line-height: 20px;
}
b{
color:#fff;
font-weight: 100;
font-size: 12px;
position:absolute;
left:40%;
}
js:
<script>
export default {
data() {progreess:30}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)