bk-magic-vue/lib/ui/progress.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.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;
    }