[代码技巧] 给你的网站加上一个加载动画

(function() {

    if (window.itjsccPageLoader) return;

    const loadStartTime = performance.now();

    let isComplete = false;

    const style = document.createElement('style');

    style.textContent = `

        /* 加载覆盖层：半透明效果 */

        .itjscc-ploader {

            position: fixed !important;

            inset: 0 !important;

            background: rgba(255, 255, 255, 0.8) !important; /* 80%透明度的白色，可看到下层 */

            backdrop-filter: blur(2px) !important; /* 轻微模糊背景，增强层次感 */

            z-index: 999999 !important;

            display: grid !important;

            place-items: center !important;

            margin: 0 !important;

            padding: 0 !important;

            pointer-events: auto !important;

            transition: opacity 0.6s ease-out !important;

        }

        

        /* 隐藏状态 */

        .itjscc-ploader.hidden {

            opacity: 0 !important;

            visibility: hidden !important;

            pointer-events: none !important;

        }

        

        /* 加载动画容器 */

        .itjscc-ploader-container {

            text-align: center !important;

            padding: 24px !important;

            background: rgba(255, 255, 255, 0.95) !important; /* 加载器本身背景更实一些 */

            border-radius: 12px !important;

            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;

            min-width: 220px !important;

        }

        

        /* 加载动画元素 */

        .itjscc-ploader-animation {

            width: 50px !important;

            height: 50px !important;

            margin: 0 auto 16px !important;

            position: relative !important;

        }

        

        .itjscc-ploader-circle {

            width: 100% !important;

            height: 100% !important;

            position: absolute !important;

            top: 0 !important;

            left: 0 !important;

            border-radius: 50% !important;

            border: 3px solid transparent !important;

            border-top-color: #3b82f6 !important;

            animation: itjscc-rotate 1.5s linear infinite !important;

        }

        

        .itjscc-ploader-circle:nth-child(2) {

            border-top-color: #10b981 !important;

            animation-delay: 0.2s !important;

            transform: scale(0.8) !important;

        }

        

        .itjscc-ploader-text {

            font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;

            font-size: 15px !important;

            color: #1e293b !important;

            font-weight: 500 !important;

        }

        

        /* 旋转动画 */

        @keyframes itjscc-rotate {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }

    `;

    (document.head || document.documentElement).appendChild(style);

    const loader = document.createElement('div');

    loader.className = 'itjscc-ploader';

    loader.innerHTML = `

        <div class="itjscc-ploader-container">

            <div class="itjscc-ploader-animation">

                <div class="itjscc-ploader-circle"></div>

                <div class="itjscc-ploader-circle"></div>

            </div>

            <div class="itjscc-ploader-text">Loading...</div>

        </div>

    `;

    document.documentElement.appendChild(loader);

    const statusText = loader.querySelector('.itjscc-ploader-text');

    const statusMessages = ["Loading...", "Preparing content...", "Almost ready..."];

    let msgIndex = 0;

    

    const textInterval = setInterval(() => {

        if (!isComplete) {

            msgIndex = (msgIndex + 1) % statusMessages.length;

            statusText.textContent = statusMessages[msgIndex];

        } else {

            clearInterval(textInterval);

        }

    }, 2000);

    function hideLoader() {

        if (isComplete) return;

        isComplete = true;

        

        clearInterval(textInterval);

        statusText.textContent = "Ready";

        

        // 在这里可以设置加载动画最少显示时间

        const MIN_DISPLAY_TIME = 1000;

        const elapsed = performance.now() - loadStartTime;

        const delay = elapsed < MIN_DISPLAY_TIME ? MIN_DISPLAY_TIME - elapsed : 0;

        

        setTimeout(() => {

            loader.classList.add('hidden');

            

            // 动画结束后彻底清理

            setTimeout(() => {

                if (loader.parentNode) loader.parentNode.removeChild(loader);

                if (style.parentNode) style.parentNode.removeChild(style);

            }, 600);

        }, delay);

    }

    let loaded = false;

    function onLoadComplete() {

        if (loaded) return;

        loaded = true;

        hideLoader();

    }

    if (document.readyState === 'complete' || document.readyState === 'interactive') {

        onLoadComplete();

    } else {

        document.addEventListener('DOMContentLoaded', onLoadComplete);

        window.addEventListener('load', onLoadComplete);

        document.addEventListener('readystatechange', () => {

            if (document.readyState === 'complete' || document.readyState === 'interactive') {

                onLoadComplete();

            }

        });

    }

    window.itjsccPageLoader = { hide: hideLoader };

})();