.preloader {
    --bg-color: #ffffff;
    --size: 200px;
    --first-color: #ff8a25;
    --second-color: #8be9ff;
    --third-color: #ff8a25;
    --fourth-color: #8be9ff;
    --thickness: 15px;
    --duration: 1s;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--duration);
    z-index: 9999999;
}

.preloader__content {
    position: relative;
    width: var(--size);
    height: var(--size);
}

.preloader__first,
.preloader__second,
.preloader__third,
.preloader__fourth {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: var(--duration) linear infinite;
}

.preloader__first {
    border-bottom: var(--thickness) solid var(--first-color);
    animation-name: first;
}

.preloader__second {
    border-right: var(--thickness) solid var(--second-color);
    animation-name: second;
}

.preloader__third {
    border-top: var(--thickness) solid var(--third-color);
    animation-name: third;
}

.preloader__fourth {
    border-left: var(--thickness) solid var(--fourth-color);
    animation-name: fourth;
}

@keyframes first {
    0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
    100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes second {
    0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
    100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes third {
    0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
    100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}

@keyframes fourth {
    0% { transform: rotateX(60deg) rotateY(25deg) rotateZ(0deg); }
    100% { transform: rotateX(60deg) rotateY(25deg) rotateZ(360deg); }
}