acud/es/progress/style/circleProgress.less

acg react 组件库

@import './common.less';

.@{progress-prefix-cls}-circle {
    position: relative;
    width: 20 * @P;
    height: 20 * @P;

    .@{progress-prefix-cls}-trail {
        position: absolute;
        width: 100%;
        height: 100%;
        color: @progress-default-trail-color;
    }

    .@{progress-prefix-cls}-text-wrapper {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate(0, -50%);
    }
}

each(.size-ratio-map(), .(@value, @key, @index) {
    .@{progress-prefix-cls}-circle.@{progress-prefix-cls}-@{key} {
        width: @progress-circle-width-unit * @value;
        height: @progress-circle-width-unit * @value;
        .@{progress-prefix-cls}-label {
            font-size: @progress-label-font-size + (@value - 1) * 2px;
        }
    }
});

each(.status-color-map(), .(@value, @key, @index) {
    .@{progress-prefix-cls}-circle.@{progress-prefix-cls}-@{key} .@{progress-prefix-cls}-bar {
        position: absolute;
        width: 100%;
        height: 100%;
        color: @value;
    }
});