accounts-frontend/packages/app/components/ui/loader/loader.scss

.loader-overlay {
    direction: ltr;

    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-first-launch {
        // if loader is shown for the first time, we will
        // remove opacity and hide the entire site contents
        background: #f2efeb;
    }

    &.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: 0.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;
    }
}