dialog {
    position: absolute;
    inset: 0;
    z-index: 2;
    place-self: center;
    align-content: center;
    justify-items: center;
    inline-size: 8rem;
    min-block-size: 8rem;
    overflow: hidden;
    background: initial;
    border: none;
}

dialog.spinner {
    position: fixed;
}

.spinner-box {
    position: relative;
    inline-size: 5rem;
    aspect-ratio: 1;
    margin-inline: auto;
    background: initial;
    border: none;
}

    .spinner-box > div {
        position: absolute;
        left: 0;
        inline-size: 100%;
        aspect-ratio: 1;
        margin-inline: auto;
    }

    .spinner-box > .spinner {
        top: -25%;
        z-index: 10;
        block-size: 100%;
        background: var(--accent-color);
        border-radius: 10%;
        animation: box-animate 1.5s -.1s linear infinite;
    }

    .spinner-box > .spinner-shadow {
        bottom: -25%;
        z-index: -1;
        block-size: 10%;
        background: #000;
        border-radius: 50%;
        opacity: .3;
        animation: box-shadow .8s -.1s linear infinite;
    }


@keyframes box-animate {
    0% {
        border-bottom-right-radius: 10%;
    }

    25% {
        rotate: 22.5deg;
        translate: 0 50%;
    }

    50% {
        border-bottom-right-radius: 100%;
        rotate: 45deg;
        scale: 1 .9;
        translate: 0 50%;
    }

    75% {
        rotate: 90deg;
        translate: 0 25%;
    }

    100% {
        rotate: 90deg;
        translate: 0;
    }
}

@keyframes box-shadow {
    50% {
        scale: 1.5 1;
    }
}