رفیق برنامه‌نویس، تا حالا شده منتظر لود شدن یه صفحه باشی و فقط یه آیکون چرخون یا یه صفحه سفید ببینی؟ کلافه‌کننده است، مگه نه؟ این حس برای کاربرات هم پیش میاد! لودینگ‌های قدیمی دیگه جواب نمیدن. اینجا می‌خوایم یه تکنیک خفن و مدرن بهت یاد بدیم که هم سرعت بارگذاری رو تو ذهن کاربرت بالا ببره، هم تجربه کاربریش رو از این رو به اون رو کنه: Skeleton Screen!

یه لحظه صبر کن! قبل از اینکه بریم سراغ جزئیات و کدنویسی، اگه دنبال ابزارهای حرفه‌ای، اسنیپت‌های آماده یا راهکارهای باحال دیگه برای پروژه‌هات می‌گردی، حتماً یه سری به فروشگاه ابزارهای ما بزن. اونجا چیزایی پیدا می‌کنی که کارتو کلی راحت‌تر می‌کنه. و اگه سوالی داشتی، هر وقت خواستی می‌تونی با تیم فنی ما تماس بگیری: 09202232789

🗺️ نقشه راهنمای ساخت Skeleton Screen (در یک نگاه)

┌────────────────────────────────────────────────────────────┐
│ 🚀 آموزش ساخت انیمیشن لودینگ (Skeleton Screen)             │
├────────────────────────────────────────────────────────────┤
│ 🎯 هدف: بهبود ادراک سرعت و UX در حین بارگذاری                          │
├────────────────────────────────────────────────────────────┤
│ ├─── چرا Skeleton Screen؟ (مزایا)                        │
│ │    ✅ کاهش حس انتظار                                    │
│ │    ✅ پیش‌نمایش محتوا                                   │
│ │    ✅ حرفه‌ای‌تر شدن رابط کاربری                       │
│ ├─── آناتومی Skeleton Screen                           │
│ │    👉 تحلیل ساختار صفحه (Layout Analysis)              │
│ │    👉 انتخاب استایل و رنگ (Styling Choices)            │
│ ├─── ابزارهای مورد نیاز                                 │
│ │    🛠️ HTML, CSS, JavaScript                            │
│ │    📚 فریم‌ورک‌ها (اختیاری)                              │
│ ├─── گام به گام: پیاده‌سازی با HTML و CSS             │
│ │    1️⃣ ساختار HTML (Placeholder)                        │
│ │    2️⃣ استایل‌دهی پایه CSS                               │
│ │    3️⃣ انیمیشن حرکت موجی یا فید (Animation)           │
│ ├─── پیاده‌سازی پیشرفته با JavaScript                │
│ │    ➡️ نمایش/پنهان‌سازی هوشمند بر اساس بارگذاری         │
│ ├─── بهینه‌سازی و نکات تکمیلی                          │
│ │    ⚡️ عملکرد و سرعت                                     │
│ │    ♿️ دسترسی‌پذیری (Accessibility)                     │
│ │    📱 رسپانسیو بودن (Mobile-Friendly)                   │
│ ├─── عیب‌یابی سریع (Troubleshooting)                   │
│ │    ❓ مشکلات رایج و راه‌حل‌ها                             │
└────────────────────────────────────────────────────────────┘

<div class="skeleton-card">
    <div class="skeleton-img"></div>
    <div class="skeleton-content">
        <div class="skeleton-line skeleton-title"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line skeleton-short"></div>
    </div>
</div>

<!-- محتوای واقعی که بعدا جایگزین میشه -->
<div class="actual-card" style="display: none;">
    <img src="product.jpg" alt="Product Image">
    <div>
        <h3>عنوان محصول واقعی</h3>
        <p>اینجا توضیحات کامل محصول قرار می‌گیرد. جزئیات بیشتر و قیمت.</p>
    </div>
</div>

.skeleton-card {
    width: 300px; /* یا از واحدهای رسپانسیو استفاده کنید */
    max-width: 90vw; /* رسپانسیو برای موبایل */
    background-color: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.skeleton-img {
    width: 100%;
    height: 200px;
    background-color: #e0e0e0;
}

.skeleton-content {
    padding: 15px;
}

.skeleton-line {
    height: 15px;
    background-color: #e8e8e8;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeleton-title {
    width: 80%;
    height: 25px;
    margin-bottom: 15px;
}

.skeleton-short {
    width: 60%;
}

/* Base animation for all skeleton elements */
.skeleton-img,
.skeleton-line {
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { background-color: #e0e0e0; }
    50% { background-color: #f5f5f5; }
    100% { background-color: #e0e0e0; }
}

/* اضافه کردن یک سایه برای حس عمق (اختیاری) */
.skeleton-card {
    position: relative;
    overflow: hidden;
}

/* انیمیشن موجی - اینو میتونی به جای pulse یا در کنارش استفاده کنی */
.skeleton-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: wave 1.6s linear infinite;
}

@keyframes wave {
    0% { left: -100%; }
    100% { left: 100%; }
}

// فرض می‌کنیم داده‌ها از یک API دریافت می‌شوند
// این یک تابع شبیه‌سازی بارگذاری داده است
function fetchData() {
    return new Promise(resolve => {
        // شبیه‌سازی تأخیر شبکه
        setTimeout(() => {
            const data = {
                title: "عنوان واقعی محصول از API",
                description: "این توضیحات از سرور دریافت شده و جایگزین Skeleton می‌شود."
            };
            resolve(data);
        }, 3000); // 3 ثانیه تأخیر
    });
}

const skeletonCard = document.querySelector('.skeleton-card');
const actualCard = document.querySelector('.actual-card');

// نمایش Skeleton Screen
skeletonCard.style.display = 'block';
actualCard.style.display = 'none';

fetchData().then(data => {
    // وقتی داده‌ها لود شدند
    // محتوای واقعی را پر می‌کنیم
    actualCard.querySelector('h3').textContent = data.title;
    actualCard.querySelector('p').textContent = data.description;

    // پنهان کردن Skeleton Screen و نمایش محتوای واقعی
    skeletonCard.style.display = 'none';
    actualCard.style.display = 'block';
});

آیا Skeleton Screen واقعاً سرعت بارگذاری سایت را افزایش می‌دهد؟

خیر، Skeleton Screen مستقیماً سرعت بارگذاری واقعی (زمان دانلود و پردازش داده‌ها) را افزایش نمی‌دهد. اما با نمایش یک پیش‌نمایش ساختاریافته، ادراک کاربر از سرعت را به شکل قابل توجهی بهبود می‌بخشد. کاربر احساس می‌کند کمتر منتظر مانده است.

برای ساخت Skeleton Screen حتماً باید از جاوااسکریپت استفاده کرد؟

خیر، می‌توانید Skeleton Screen را فقط با HTML و CSS بسازید و آن را همیشه به عنوان بخشی از ساختار صفحه اولیه داشته باشید. اما برای کنترل هوشمند نمایش و پنهان‌سازی آن بر اساس وضعیت بارگذاری محتوای واقعی (مثلاً وقتی داده‌ها از API می‌رسند)، جاوااسکریپت ضروری است.

آیا Skeleton Screen با SEO سازگار است؟

بله، اگر به درستی پیاده‌سازی شود، Skeleton Screen به بهبود Core Web Vitals (مانند LCP و CLS) کمک می‌کند که عوامل مهمی در سئو هستند. نمایش اولیه ساختار صفحه باعث می‌شود که گوگل سریع‌تر محتوای اصلی را شناسایی کند و تجربه کاربری بهتر منجر به ماندگاری بیشتر کاربر در سایت می‌شود که برای سئو مفید است.

@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap’);

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
background-color: #f9f9f9;
font-size: 16px; /* Base font size for readability */
}

.article-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

h1, h2, h3 {
color: #2c3e50;
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.4;
font-weight: 700;
text-align: right;
}

h1 {
font-size: 2.6em; /* Responsive font size */
font-weight: 800;
color: #2980b9;
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
margin-bottom: 30px;
}

h2 {
font-size: 2.1em;
font-weight: 700;
color: #34495e;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 10px;
}

h3 {
font-size: 1.6em;
font-weight: 600;
color: #34495e;
margin-top: 30px;
}

p {
margin-bottom: 18px;
text-align: justify;
}

ul, ol {
margin-bottom: 18px;
padding-right: 25px;
list-style-position: inside;
text-align: right;
}

li {
margin-bottom: 8px;
padding-right: 5px; /* Adjust for bullet visibility */
}

a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #2980b9;
text-decoration: underline;
}

.table-of-contents {
background-color: #f8f8f8;
border: 1px solid #eee;
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
text-align: right;
}

.table-of-contents h2 {
color: #2c3e50;
font-size: 1.8em;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}

.table-of-contents li {
margin-bottom: 10px;
font-size: 1.1em;
}

.table-of-contents a {
color: #3498db;
font-weight: 500;
display: block;
padding: 5px 0;
}

.summary-box {
background-color: #e8f6f3; /* Light teal */
border-right: 5px solid #1abc9c; /* Darker teal accent */
border-radius: 8px;
padding: 25px;
margin: 30px 0;
font-size: 1.1em;
line-height: 1.7;
box-shadow: 0 3px 12px rgba(26, 188, 156, 0.15);
text-align: right;
}

.summary-box h3 {
color: #1abc9c;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.8em;
text-align: right;
}

.summary-box ul {
list-style: none;
padding: 0;
margin: 0;
}

.summary-box li {
margin-bottom: 10px;
padding-right: 0;
position: relative;
}

.summary-box li::before {
content: “✓”;
color: #1abc9c;
font-weight: bold;
position: absolute;
right: -25px; /* Adjust as needed for alignment */
top: 0;
}

.code-box {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 15px 20px;
border-radius: 8px;
overflow-x: auto;
font-family: ‘Fira Code’, ‘Cascadia Code’, ‘Monaco’, ‘Consolas’, monospace;
font-size: 0.9em;
line-height: 1.5;
direction: ltr; /* Ensure code displays LTR */
text-align: left;
margin: 25px 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.code-box pre {
margin: 0;
padding: 0;
white-space: pre-wrap; /* For better word wrapping */
}

.info-box {
background-color: #e7f3ff;
border-right: 5px solid #2196f3;
border-radius: 8px;
padding: 20px;
margin: 25px 0;
font-size: 1.05em;
color: #333;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
text-align: right;
}

.info-box strong {
color: #2196f3;
}

.warning-box {
background-color: #fff3e0;
border-right: 5px solid #ff9800;
border-radius: 8px;
padding: 20px;
margin: 25px 0;
font-size: 1.05em;
color: #333;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
text-align: right;
}

.warning-box strong {
color: #ff9800;
}

table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 1em;
text-align: right;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners */
}

th, td {
padding: 15px;
border: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
font-weight: 600;
color: #333;
}

tr:nth-child(even) {
background-color: #fdfdfd;
}

tr:hover {
background-color: #f5f5f5;
}

.faq-section {
background-color: #f8f8f8;
border-top: 2px solid #3498db;
padding: 25px;
margin-top: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
text-align: right;
}

.faq-item {
margin-bottom: 25px;
border-bottom: 1px dashed #eee;
padding-bottom: 20px;
}

.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.faq-question {
font-weight: 700;
color: #34495e;
font-size: 1.3em;
margin-bottom: 10px;
}

.faq-answer {
color: #555;
font-size: 1.1em;
text-align: justify;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.article-container {
padding: 15px;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.7em;
}

h3 {
font-size: 1.4em;
}

body {
font-size: 15px;
}

.table-of-contents, .summary-box, .code-box, .info-box, .warning-box, table {
margin: 20px 0;
padding: 15px;
}

.summary-box li::before {
right: -20px;
}

table, thead, tbody, th, td, tr {
display: block;
}

th {
display: none; /* Hide table headers (but not their content) */
}

td {
border: none;
position: relative;
padding-right: 50%; /* Space for pseudo-element */
text-align: right;
}

td::before {
/* For responsive table, use data attributes to display header names */
content: attr(data-label);
position: absolute;
right: 15px;
width: 45%;
padding-left: 10px;
font-weight: bold;
text-align: right;
white-space: nowrap;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.7em;
}

h2 {
font-size: 1.5em;
}

h3 {
font-size: 1.2em;
}

body {
font-size: 14px;
}
.summary-box li::before {
right: -15px;
}
}

/* Skeleton Screen Specific CSS for example */
.skeleton-box {
background: #f0f0f0;
border-radius: 4px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}

.skeleton-box::after {
content: ”;
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 1.5s infinite;
}

.skeleton-title {
height: 25px;
width: 80%;
margin-bottom: 15px;
}

.skeleton-text {
height: 15px;
width: 100%;
margin-bottom: 10px;
}

.skeleton-image {
height: 150px;
width: 100%;
margin-bottom: 15px;
background: #e0e0e0;
}
.skeleton-text.short {
width: 60%;
}
.skeleton-text.medium {
width: 85%;
}

@keyframes shimmer {
0% { right: -100%; }
100% { right: 100%; }
}

<div id="content-loader" class="skeleton-loader">
    <!-- یک آیتم نمونه که قرار است بارگذاری شود -->
    <div class="skeleton-item">
        <div class="skeleton-image-placeholder"></div>
        <div class="skeleton-content">
            <div class="skeleton-title-placeholder"></div>
            <div class="skeleton-text-placeholder" style="width: 90%;"></div>
            <div class="skeleton-text-placeholder" style="width: 70%;"></div>
        </div>
    </div>

    <!-- می‌توانید آیتم‌های بیشتری اضافه کنید تا صفحه پر شود -->
    <div class="skeleton-item">
        <div class="skeleton-image-placeholder"></div>
        <div class="skeleton-content">
            <div class="skeleton-title-placeholder"></div>
            <div class="skeleton-text-placeholder" style="width: 85%;"></div>
            <div class="skeleton-text-placeholder" style="width: 60%;"></div>
        </div>
    </div>
</div>

<!-- اینجا محتوای واقعی شما قرار می گیرد -->
<div id="real-content" style="display: none;">
    <h2>عنوان مقاله واقعی</h2>
    <img src="https://via.placeholder.com/400x200" alt="تصویر واقعی" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;">
    <p>اینجا محتوای واقعی و کامل مقاله قرار می‌گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
    <p>چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می‌طلبد.</p>
</div>

/* Styles for the overall skeleton loader container */
.skeleton-loader {
    width: 100%;
    margin-bottom: 20px;
}

/* Styles for each skeleton item */
.skeleton-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Base style for all placeholder elements */
.skeleton-image-placeholder,
.skeleton-title-placeholder,
.skeleton-text-placeholder {
    background: #f0f0f0; /* Light gray background */
    border-radius: 4px;
    position: relative;
    overflow: hidden; /* Important for shimmer effect */
}

/* Shimmer animation effect */
.skeleton-image-placeholder::after,
.skeleton-title-placeholder::after,
.skeleton-text-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start from left */
    width: 100%;
    height: 100%;
    /* Gradient for shimmer: transparent -> light -> transparent */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Specific dimensions for placeholders */
.skeleton-image-placeholder {
    width: 120px;
    height: 120px;
    min-width: 120px; /* Ensure it doesn't shrink */
    background: #e0e0e0; /* Slightly darker for images */
}

.skeleton-content {
    flex-grow: 1;
}

.skeleton-title-placeholder {
    height: 25px;
    width: 70%; /* Varies per item */
    margin-bottom: 15px;
}

.skeleton-text-placeholder {
    height: 15px;
    width: 100%; /* Varies per item */
    margin-bottom: 10px;
}

/* Responsive adjustments for skeleton */
@media (max-width: 768px) {
    .skeleton-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .skeleton-image-placeholder {
        width: 100%;
        height: 150px;
        min-width: auto;
        margin-bottom: 15px;
    }
    .skeleton-title-placeholder,
    .skeleton-text-placeholder {
        width: 80% !important; /* Override inline styles for responsiveness */
    }
}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const skeletonLoader = document.getElementById('content-loader');
        const realContent = document.getElementById('real-content');

        // تابع شبیه سازی بارگذاری داده
        function simulateDataLoader() {
            return new Promise(resolve => {
                // فرض کنید 3 ثانیه طول می‌کشد تا داده‌ها بارگذاری شوند
                setTimeout(() => {
                    resolve('Data loaded!');
                }, 3000); // 3000 میلی‌ثانیه = 3 ثانیه
            });
        }

        // نمایش Skeleton Screen و شروع بارگذاری داده
        skeletonLoader.style.display = 'block';
        realContent.style.display = 'none';

        simulateDataLoader().then(() => {
            // وقتی داده‌ها بارگذاری شدند:
            // 1. محتوای واقعی را نمایش بده
            realContent.style.display = 'block';
            // 2. Skeleton Screen را مخفی کن
            skeletonLoader.style.display = 'none';
        }).catch(error => {
            console.error('Error loading data:', error);
            // در صورت بروز خطا، Skeleton را پنهان و یک پیام خطا نمایش بده
            skeletonLoader.style.display = 'none';
            realContent.innerHTML = '<p style="color: red;">خطا در بارگذاری محتوا. لطفا دوباره تلاش کنید.</p>';
            realContent.style.display = 'block';
        });
    });
</script>