.global-page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color, #121212);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.global-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* HTML: <div class="loader"></div> */
.global-page-loader .loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background: conic-gradient(#25b09b 25%, #f03355 0 50%, #514b82 0 75%, #ffa516 0);
    animation: l22 2s infinite linear;
}

.global-page-loader .loader::before,
.global-page-loader .loader::after {
    content: "";
    grid-area: 1/1;
    margin: 15%;
    border-radius: 50%;
    background: inherit;
    animation: inherit;
}

.global-page-loader .loader::after {
    margin: 25%;
    animation-duration: 3s;
}

@keyframes l22 {
    100% { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
    .global-page-loader .loader,
    .global-page-loader .loader::before,
    .global-page-loader .loader::after {
        animation-duration: 4s;
    }
}