magiccube-vue3/package/style/progress.less

vue3-js版组件库

@import './theme';

.mc-progress{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

    &__text{
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        width: 100%;

        &--left{
            flex: 1;
            font-size: 12px;
            color: #828B97;
        }

        &--right{
            font-size: 14px;
            color: #EF7F00;
        }
    }

    &__bar{
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        // box-shadow: 1px 0px 4px rgb(0 0 0 / 30%);
    }

    &__inner{
        height: 100%;
        transition: all 100ms;
        background: linear-gradient(88.9deg, rgba(68, 109, 234, 1) 0%,rgba(131, 195, 251, 1) 95%,rgba(131, 195, 251, 1) 100%);
        border-radius: 8px;
    }
}