vue 制作进度条
HTML:{{progress}}%css:div.progressContainer{height: 20px;width: 96%;border-radius: 10px;background-color: #ddd;margin
·
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>
以上就是一个简易的进度条,百分比显示在进度条上
更多推荐
已为社区贡献11条内容
所有评论(0)