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>
    (() => {
        const KEY = "__page_loading_indicator_bound__";
        if (window[KEY]) return;
        window[KEY] = true;

        let timer;

        const getEl = () => document.getElementById("page-loading-indicator");

        const show = () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                const el = getEl();
                if (el) el.classList.add("is-active");
            }, 120);
        };

        const hide = () => {
            clearTimeout(timer);
            const el = getEl();
            if (!el) return;

            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    el.classList.remove("is-active");
                });
            });
        };

        document.addEventListener("astro:before-preparation", show);
        document.addEventListener("astro:page-load", 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;
        will-change: transform;
    }

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

    .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;
    }
</style>