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

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

.bk-round-progress{
    display:inline-block;
    position:relative;
    text-align:center;
}

.bk-round-progress circle{
        line-height:1;
        -webkit-transform-origin:center;
                transform-origin:center;
        stroke-linecap:round;
    }

.bk-round-progress .title{
        text-align:center;
        position:absolute;
        left:50%;
        width:100%;
        overflow:auto;
        -webkit-transform:translate(-50%, 0);
                transform:translate(-50%, 0)
    }

.bk-round-progress .num{
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%, -60%);
                transform:translate(-50%, -60%);
        color:#63656e;
    }

.bk-round-progress .progress-background{
        -webkit-transform:scale(0.9);
                transform:scale(0.9);
    }

.bk-round-progress .progress-bar{
        -webkit-transform:scale(0.9) rotate(-90deg);
                transform:scale(0.9) rotate(-90deg);
        -webkit-transition:stroke-dashoffset 0.5s ease;
        transition:stroke-dashoffset 0.5s ease;
    }