.stage{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5px 1fr 5px 1fr 5px 1fr 5px 1fr;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
}

.stage__item{
    display: inline-block;
    height: 5px;
    border-radius: 5px;
    position: relative;
}

.stage__item:after{
    content: '';
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    width: 30%;
    bottom: 0;
    opacity: 0;
    -webkit-box-shadow: 0px 0px 15px 12px rgb(255 255 255);
    box-shadow: 0px 0px 15px 12px rgb(255 255 255);
}

.stage__item:nth-child(1):after{
    -webkit-animation: stage_load1 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
    animation: stage_load1 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
}
.stage__item:nth-child(2):after{
    -webkit-animation: stage_load2 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
    animation: stage_load2 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
}
.stage__item:nth-child(3):after{
    -webkit-animation: stage_load3 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
    animation: stage_load3 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
}
.stage__item:nth-child(4):after{
    -webkit-animation: stage_load4 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
    animation: stage_load4 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
}
.stage__item:nth-child(5):after{
    -webkit-animation: stage_load5 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
    animation: stage_load5 4s infinite cubic-bezier(0.11, 0.37, 1, 0.41);
}

.stage.stage--green .stage__item{
    background: -webkit-gradient(linear, left top, left bottom, from(#93DF32), to(#70BD0D));
    background: -o-linear-gradient(top, #93DF32 0%, #70BD0D 100%);
    background: linear-gradient(180deg, #93DF32 0%, #70BD0D 100%);
}

.stage.stage--yellow .stage__item{
    background: -webkit-gradient(linear, left top, left bottom, from(#FFE9AF), to(#FFC093));
    background: -o-linear-gradient(top, #FFE9AF 0%, #FFC093 100%);
    background: linear-gradient(180deg, #FFE9AF 0%, #FFC093 100%);
}

.stage.stage--purple .stage__item{
    background: -webkit-gradient(linear, left top, left bottom, from(#9D68F3), to(#6966FF));
    background: -o-linear-gradient(top, #9D68F3 0%, #6966FF 100%);
    background: linear-gradient(180deg, #9D68F3 0%, #6966FF 100%);
}

@-webkit-keyframes stage_load1 {
    0% {
        opacity: 0.2;
        left: 0
    }
    10% {
        opacity: .7;
        left: 50%;
    }
    20% {
        opacity: 0.1;
        left: 100%;
    }
}

@keyframes stage_load1 {
    0% {
        opacity: 0.2;
        left: 0
    }
    10% {
        opacity: .7;
        left: 50%;
    }
    20% {
        opacity: 0.1;
        left: 100%;
    }
}

@-webkit-keyframes stage_load2 {
    20% {
        opacity: 0.2;
        left: 0
    }
    30% {
        opacity: .7;
        left: 50%;
    }
    40% {
        opacity: 0.1;
        left: 100%;
    }
}

@keyframes stage_load2 {
    20% {
        opacity: 0.2;
        left: 0
    }
    30% {
        opacity: .7;
        left: 50%;
    }
    40% {
        opacity: 0.1;
        left: 100%;
    }
}

@-webkit-keyframes stage_load3 {
    40% {
        opacity: 0.2;
        left: 0
    }
    50% {
        opacity: .7;
        left: 50%;
    }
    60% {
        opacity: 0.1;
        left: 100%;
    }
}

@keyframes stage_load3 {
    40% {
        opacity: 0.2;
        left: 0
    }
    50% {
        opacity: .7;
        left: 50%;
    }
    60% {
        opacity: 0.1;
        left: 100%;
    }
}

@-webkit-keyframes stage_load4 {
    60% {
        opacity: 0.2;
        left: 0
    }
    70% {
        opacity: .7;
        left: 50%;
    }
    80% {
        opacity: 0.1;
        left: 100%;
    }
}

@keyframes stage_load4 {
    60% {
        opacity: 0.2;
        left: 0
    }
    70% {
        opacity: .7;
        left: 50%;
    }
    80% {
        opacity: 0.1;
        left: 100%;
    }
}

@-webkit-keyframes stage_load5 {
    80% {
        opacity: 0.2;
        left: 0
    }
    90% {
        opacity: .7;
        left: 50%;
    }
    100% {
        opacity: 0.1;
        left: 100%;
    }
}

@keyframes stage_load5 {
    80% {
        opacity: 0.2;
        left: 0
    }
    90% {
        opacity: .7;
        left: 50%;
    }
    100% {
        opacity: 0.1;
        left: 100%;
    }
}