react-ui-component/css/progress.less

some component build with ReactJs

@import url('meta');

.progress{
    position: relative;
    background: @gray_d;
    border-radius: 3px;
    height: 6px;

    .__progressSize(@size){
        & {
            @_h: @size * 1px;
            height: @_h;
            font-size: @_h;
            >.bar, >._progress {
                height: @_h;
            }
        }
    }

    @-webkit-keyframes progressbar {
        0% { left: -100%;}
        100% { left: 100%;}
    }
    @-o-keyframes progressbar {
        0% { left: -100%;}
        100% { left: 100%;}
    }
    @keyframes progressbar {
        0% { left: -100%;}
        100% { left: 100%;}
    }

    >._progress {
        overflow: hidden;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        text-align: center;
        color: @white;
        line-height: 6px;
        background: @blue;
        border-radius: 10px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }

    &._completed {
        >._progress {
            background: @green;
        }
    }
    &._failed {
        >._progress {
            background: @red;
        }
    }
    &._context {
        height: 15px;
        line-height: 15px;
        border-radius: 6px;
        font-size: 12px;
        >._progress {
            border-radius: inherit;
            font-size: inherit;
            line-height: inherit;
        }
    }
    &._disabled {
        >._progress {
            background: @gray_b;
        }
    }

    &._large {
        .__progressSize(10)
    }
    &._small {
        .__progressSize(2)
    }

    &._active {
        >._progress {
            &:before {
                content: '';
                position: absolute;
                border-radius: inherit;
                top: 0;
                bottom: 0;
                width: 25%;
                border-radius: inherit;
                z-index: 1;
                -webkit-transition: all .3s;
                -o-transition: all .3s;
                transition: all .3s;
                background: rgba(255,255,255, .2);
                animation: progressbar 2s linear infinite;
            }
        }
    }
}