.preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background-color: #eee;
    display: grid;
    place-items: center;
}

@-webkit-keyframes gyro {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(calc(var(--radius) * 1%));
        transform: scale(1) rotate(0deg) translateY(calc(var(--radius) * 1%));
    }

    50% {
        -webkit-transform: scale(0.5) rotate(1440deg) translateY(0);
        transform: scale(0.5) rotate(1440deg) translateY(0);
    }

    100% {
        -webkit-transform: scale(1) rotate(2920deg) translateY(calc(var(--radius) * 1%));
        transform: scale(1) rotate(2920deg) translateY(calc(var(--radius) * 1%));
    }
}

@keyframes gyro {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(calc(var(--radius) * 1%));
        transform: scale(1) rotate(0deg) translateY(calc(var(--radius) * 1%));
    }

    50% {
        -webkit-transform: scale(0.5) rotate(1440deg) translateY(0);
        transform: scale(0.5) rotate(1440deg) translateY(0);
    }

    100% {
        -webkit-transform: scale(1) rotate(2920deg) translateY(calc(var(--radius) * 1%));
        transform: scale(1) rotate(2920deg) translateY(calc(var(--radius) * 1%));
    }
}

.loader::after,
.loader::before {
    --radius: 250;
    -webkit-animation: gyro 2s infinite linear;
    animation: gyro 2s infinite linear;
    background: #1b1b1b;
    border-radius: 100%;
    content: '';
    height: 20px;
    width: 20px;
    position: absolute;
}

.loader::before {
    --radius: -250;
    background: #E68815;
}