accounts-frontend/src/components/ui/loader/loader.scss

.loader-overlay {
    background: rgba(255, 255, 255, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    visibility: hidden;
    opacity: 0;

    transition: 0.4s ease;

    &.is-active {
        opacity: 1;
        visibility: visible;
    }
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    width: 153px;
    height: 153px;

    &__cube {
        position: absolute;
        margin: -1px;
        padding: 0;
        width: 50px;
        height: 50px;
        background: rgba(35, 35, 35, 0.6);
        display: inline-block;
        animation-iteration-count: infinite;
        animation-duration: .5s;
        animation-timing-function: linear;

        &--1 {
            margin: 0 0 0 0;
            animation-name: cube1;
        }

        &--2 {
            margin: 0 0 0 051px;
            animation-name: cube2;
        }

        &--3 {
            margin: 0 0 0 102px;
            animation-name: cube3;
        }

        &--4 {
            margin: 51px 0 0 0;
            animation-name: cube4;
        }

        &--5 {
            margin: 051px 0 0 051px;
        }

        &--6 {
            margin: 51px 0 0 102px;
            animation-name: cube6;
        }

        &--7 {
            margin: 102px 0 0 0;
            animation-name: cube7;
        }

        &--8 {
            margin: 102px 0 0 051px;
            animation-name: cube8;
        }
    }
}

@keyframes cube1 {
    25%{ margin: 0 0 0 0;}
    50%{ margin: 0 0 0 51px;}
    75%{ margin: 0 0 0 51px;}
    100%{margin: 0 0 0 51px;}
}

@keyframes cube2 {
    25%{ margin: 0 0 0  51px;}
    50%{ margin: 0 0 0 102px;}
    75%{ margin: 0 0 0 102px;}
    100%{margin: 0 0 0 102px;}
}

@keyframes cube3 {
    25%{ margin: 51px 0 0 102px;}
    50%{ margin: 51px 0 0 102px;}
    75%{ margin: 51px 0 0 102px;}
    100%{margin: 51px 0 0 102px;}
}

@keyframes cube4 {
    25%{ margin: 51px 0 0 0;}
    50%{ margin: 51px 0 0 0;}
    75%{ margin:    0 0 0 0;}
    100%{margin:    0 0 0 0;}
}

@keyframes cube6 {
    25%{ margin: 102px 0 0 102px;}
    50%{ margin: 102px 0 0 102px;}
    75%{ margin: 102px 0 0 102px;}
    100%{margin: 102px 0 0  51px;}
}

@keyframes cube7 {
    25%{ margin: 102px 0 0 0;}
    50%{ margin: 102px 0 0 0;}
    75%{ margin:  51px 0 0 0;}
    100%{margin:  51px 0 0 0;}
}

@keyframes cube8 {
    25%{ margin: 102px 0 0 51px;}
    50%{ margin: 102px 0 0 51px;}
    75%{ margin: 102px 0 0 51px;}
    100%{margin: 102px 0 0    0;}
}