bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
70 lines (58 loc) • 1.42 kB
CSS
.bk-progress{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.bk-progress .progress-bar{
width:100%;
height:4px;
background:#F0F1F5;
border-radius:50px;
position:relative;
vertical-align:middle;
text-align:center
}
.bk-progress .progress-bar.bk-progress-small{
height:4px;
}
.bk-progress .progress-bar.bk-progress-normal{
height:8px;
}
.bk-progress .progress-bar.bk-progress-large{
height:12px;
}
.bk-progress .progress-inner{
position:absolute;
left:0;
top:0;
width:50%;
height:100%;
border-radius:50px;
-webkit-transition:width 0.5s ease;
transition:width 0.5s ease
}
.bk-progress .progress-inner.bk-primary{
background:#3a84ff;
}
.bk-progress .progress-inner.bk-success{
background:#2dcb56;
}
.bk-progress .progress-inner.bk-warning{
background:#ff9c01;
}
.bk-progress .progress-inner.bk-danger{
background:#ff5656;
}
.bk-progress .inner-text{
width:100%;
text-align:center;
color:#fff;
height:100%;
}
.bk-progress .progress-text{
width:7%;
text-align:center;
}