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

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

.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:2px;
        }

.bk-progress .progress-bar.bk-progress-normal{
            height:4px;
        }

.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:#006DFF;
        }

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