SanYeCao-blog/src/components/Spinner.astro

<div id="page-loading-indicator" aria-hidden="true" transition:persist>
    <span class="page-loading-spinner"></span>
</div>

<script is:inline>
    (() => {
        let timer;

        const show = () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                const el = document.getElementById("page-loading-indicator");
                if (el) el.classList.add("is-active");
            }, 120);
        };

        const hide = () => {
            clearTimeout(timer);
            const el = document.getElementById("page-loading-indicator");
            if (el) el.classList.remove("is-active");
        };

        document.addEventListener("astro:before-preparation", show);
        document.addEventListener("astro:page-load", hide);

        hide();
    })();
</script>

<style is:global>
    #page-loading-indicator {
        position: fixed;
        top: 1rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
        display: grid;
        place-items: center;
        transform: 
            scale(1.3)
            translateY(-70px);
        pointer-events: none;
        transition:
            transform 160ms linear;
        z-index: 9999;
    }

    #page-loading-indicator.is-active {
        transform: scale(1) translateY(0px);
    }

    .page-loading-spinner {
        width: 1.4rem;
        height: 1.4rem;
        box-sizing: border-box;
        border: 1.5px solid #7da2ff;
        border-top-color: white;
        border-radius: 50%;
        background: transparent;
        box-shadow:
            0 0 0 1px #606060,
            inset 0 0 0 1px #606060;
        animation: page-loading-spin-rhythm 2.1s infinite;
        transform-origin: center;
    }

    @keyframes page-loading-spin-rhythm {
        0% {
            transform: rotate(0deg);
            animation-timing-function: cubic-bezier(0.25, 0.75, 0.35, 1);
        }

        52% {
            transform: rotate(720deg); /* 前两圈，稍微慢一点 */
            animation-timing-function: cubic-bezier(0.55, 0.08, 0.78, 0.22);
        }

        100% {
            transform: rotate(1080deg); /* 最后一圈更慢 */
        }
    }

    .dark .page-loading-spinner,
    html.dark .page-loading-spinner {
        border-color: #d8c7a1;
        border-top-color: transparent;
    }

    @keyframes page-loading-spin {
        to {
            transform: rotate(360deg);
        }
    }
</style>