.custom-loader {
    width: 64px;
    height: 64px;
    display: inline-block;
    overflow: hidden;
    background: none;
    margin: auto;
    &-inner {
        width: 100%;
        height: 100%;
        position: relative;
        transform: translateZ(0) scale(0.64);
        backface-visibility: hidden;
        transform-origin: 0 0;
        div {
            position: absolute;
            width: 4px;
            box-sizing: content-box;
            &:nth-child(1) {
                left: 23px;
                background: #8fc05b;
                animation: custom-loader-inner-1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
                animation-delay: -0.2s
            }
            &:nth-child(2) {
                left: 48px;
                background: #8fc05b;
                animation: custom-loader-inner-2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
                animation-delay: -0.1s
            }
            &:nth-child(3) {
                left: 73px;
                background: #8fc05b;
                animation: custom-loader-inner-3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
                animation-delay: undefineds
            }
            
        }
    }
}


@keyframes custom-loader-inner-1 {
    0% {
        top: 20px;
        height: 60px
    }
    50% {
        top: 35px;
        height: 30px
    }
    100% {
        top: 35px;
        height: 30px
    }
}

@keyframes custom-loader-inner-2 {
    0% {
        top: 23.75px;
        height: 52.5px
    }
    50% {
        top: 35px;
        height: 30px
    }
    100% {
        top: 35px;
        height: 30px
    }
}

@keyframes custom-loader-inner-3 {
    0% {
        top: 27.5px;
        height: 45px
    }
    50% {
        top: 35px;
        height: 30px
    }
    100% {
        top: 35px;
        height: 30px
    }
}