ساخت لودینگ سایت

کپی دانلود کپی دانلود

/*
 * اسکلت لودینگ ترکیبی با انیمیشن متنی LOADING
 * سازگار با WP Rocket و المنتور، قابل تنظیم از طریق WPCode
 * نسخه سبک با ساختار سایت و انیمیشن سریع
 */

/* تنظیمات پیش‌فرض */
$skeleton_settings = array(
    'enable'          => true,      // فعال/غیرفعال کردن لودینگ
    'animation_speed' => 0.8,      // سرعت انیمیشن (ثانیه)
    'bg_color'        => '#f1f1f1', // رنگ پس‌زمینه اسکلت
    'highlight_color' => '#e0e0e0'  // رنگ هایلایت اسکلت
);

/* دریافت تنظیمات از WPCode Variables */
if (function_exists('wpcode_get_option')) {
    $skeleton_settings = wp_parse_args(
        wpcode_get_option('skeleton_settings', array()),
        $skeleton_settings
    );
}

/* افزودن استایل و اسکریپت */
if ($skeleton_settings['enable']) {
    add_action('wp_head', function() use ($skeleton_settings) {
        ?>
        <style id="site-skeleton-css">
        .skeleton-loader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:#fff;padding:15px;box-sizing:border-box;display:flex;flex-direction:column;gap:15px;transition:opacity .3s ease-out,visibility .3s ease-out;}
        .skeleton-item{background:linear-gradient(90deg,<?php echo esc_attr($skeleton_settings['bg_color']); ?> 25%,<?php echo esc_attr($skeleton_settings['highlight_color']); ?> 50%,<?php echo esc_attr($skeleton_settings['bg_color']); ?> 75%);background-size:400% 100%;animation:shimmer <?php echo floatval($skeleton_settings['animation_speed']); ?>s infinite;border-radius:6px;}
        @keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0% 50%;}}
        .skeleton-header{height:70px;width:100%;max-width:1200px;margin:0 auto;}
        .skeleton-title{height:30px;width:60%;max-width:600px;margin:0 auto;}
        .skeleton-content{height:16px;width:80%;max-width:800px;margin:0 auto;}
        .skeleton-content.short{width:50%;max-width:500px;}
        .skeleton-image{height:200px;width:100%;max-width:800px;margin:0 auto;}
        .skeleton-footer{height:60px;width:100%;max-width:1200px;margin:0 auto;}
        .loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.875rem;letter-spacing:.1em;white-space:nowrap;font-family:"Inter",sans-serif;}
        .loading span{animation:blur 1.5s calc(var(--i)/7*1s) alternate infinite;}
        @keyframes blur{to{filter:blur(5px);}}
        @media (max-width:768px){
            .skeleton-header{height:50px;}
            .skeleton-title{width:80%;height:24px;}
            .skeleton-content{width:90%;}
            .skeleton-image{height:150px;}
            .skeleton-footer{height:40px;}
            .loading{font-size:1.5rem;}
        }
        </style>

        <div class="skeleton-loader">
            <div class="skeleton-item skeleton-header"></div>
            <div class="skeleton-item skeleton-title"></div>
            <div class="skeleton-item skeleton-content"></div>
            <div class="skeleton-item skeleton-content short"></div>
            <div class="skeleton-item skeleton-image"></div>
            <div class="skeleton-item skeleton-content"></div>
            <div class="skeleton-item skeleton-footer"></div>
            <div class="loading">
                <span style="--i:0">L</span>
                <span style="--i:1">O</span>
                <span style="--i:2">A</span>
                <span style="--i:3">D</span>
                <span style="--i:4">I</span>
                <span style="--i:5">N</span>
                <span style="--i:6">G</span>
            </div>
        </div>

        <script defer id="skeleton-loader-script">
        document.documentElement.classList.add("loading-active");
        window.addEventListener('load',()=>{const e=document.querySelector('.skeleton-loader');if(e){e.style.opacity='0';e.style.visibility='hidden';setTimeout(()=>{e.remove();document.documentElement.classList.remove("loading-active");},<?php echo (int)($skeleton_settings['animation_speed'] * 1000); ?>);}});
        setTimeout(()=>{const e=document.querySelector('.skeleton-loader');if(e){e.remove();document.documentElement.classList.remove("loading-active");}},2500);
        </script>
        <?php
    });
}