.xp-progress-bar {
    position: relative;
    width: 200px;
    margin-top: 30px;

    &-percent {
        .el-progress-bar__outer {
            border: 1px solid #ededed;
            background: #fff;
        }
        &.is-success {
            .el-progress-bar__inner {
                background: linear-gradient(to right, #5fffd5, #35e3ff);
            }
        }
        &.is-warn {
            .el-progress-bar__inner {
                background: linear-gradient(to right, #f33, #ffaa7e);
            }
        }
        &.is-exception {
            .el-progress-bar__inner {
                background: linear-gradient(to right, #ff8f49, #ffea81);
            }
        }
        &.is-null {
            .el-progress-bar__outer {
                background: #ebebeb;
            }
        }
    }
    &-icon {
        position: absolute;
        top: 40%;
        left: 0;
        &.triangle-warn {
            color: #ffa97d;
        }
        &.triangle-exception {
            color: #ffeb8d;
        }
        &.triangle-success {
            color: #35e3ff;
        }
    }
    &-text {
        margin-top: 15px;
        font-size: 14px;
    }
}