.loader {
    position: fixed;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 400px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

    .loader::before,
    .loader::after,
    .loader .ring {
        content: "";
        grid-area: 1 / 1;
        border: 24px solid transparent;
        border-right-color: #06b6d4;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 1;
    }

    .loader::before {
        width: 400px;
        height: 400px;
        animation: spin 1s linear infinite;
    }

    .loader::after {
        width: 350px;
        height: 350px;
        animation: spin 1.5s linear infinite reverse;
    }

    .loader .ring1 {
        width: 300px;
        height: 300px;
        animation: spin 2s linear infinite;
    }

    .loader .ring2 {
        width: 250px;
        height: 250px;
        animation: spin 2.5s linear infinite reverse;
    }

    .loader img {
        grid-area: 1 / 1;
        width: 100px;
        height: auto;
        z-index: 2;
        pointer-events: none;
    }

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