پیاده سازی Skeleton Screen

css
خرداد 01، 1400
card thumbnail

Skeleton Screen،روشی برای نمایش روند بارگذاری داده ها در صفحست.

ما بیشتر اوقات از spinner ها و progressbar ها برای این منظور استفاده می کنیم.

تصویر پایین رو ببینید:

شما چی فکر می کنید؟دوست دارید کاربر با دیدن یک Skeleton Screen منتظر بمونه یا یک Spinner؟..

یجورایی یک ایده خلاقانه برای مدیریت انتظار به حساب میاد.

Skeleton Screen در حقیقت یک نسخه خالی از صفحست که اطلاعات به تدریج در اون بارگذاری میشن.

هر موقع کاربر درخواست محتوای جدیدی میکنه،میتونیم تا زمانی که اطلاعات برای نمایش آماده نیستند Skeleton Screen هارو نمایش بدیم و به محض آماده شدن اطلاعات اون هارو مخفی کنیم.

نکته ای که باید بهش توجه کنید اینه که Skeleton Screen باید با ساختار واقعی صفحه یکی باشه،تا هنگامی که اطلاعات دریافت میشه جای Skeleton Screen بشینه..

خب بنظرم مقدمه یا تئوریش کافیه،نمونه ای که قرار هست پیاده کنیم تو تصویر پایین مشخصه..

قدم اول:پیاده سازی ساختار html

خب اگه به تصویر بالا نگاه کنید مشخصه که اصطلاحا اسکلت یک تصویر،یک آواتار،یک عنوان و یک زیر عنوان رو داریم.

من ساختار htmlش رو اینجوری مینویسم:

        <div class="card">
            <div class="thumbnail skeleton-screen"></div>
            <div class="details">
                <div class="avatar skeleton-screen"></div>
                <div class="details-text">
                    <div class="title skeleton-screen"></div>
                    <div class="subtitle skeleton-screen"></div>
                </div>
            </div>
        </div>

کلاس skeleton-screen که به تصویر،آواتار و عنوان و زیر عنوان دادیم قراره همون افکت که تو تصویر بالا مشخصه رو انجام بده،خب اگه این کلاس رو تعریف نکنیم مجبوریم که برای تصویر و.. به صورت جدا اون افکت رو پیاده کنیم و در نظر بگیرید که قرار هست در قسمتهای مختلفی از این حالت استفاده کنید،پس بهتر نیست بجای تکرار،یکبار اون رو پیاده کنیم؟..

قدم دوم:استایل کلی

.card {
    max-width: 310px;
    margin: 15px;
}
.card .thumbnail {
    height: 180px;
    margin-bottom: 15px;
}
.card .details {
    display: flex;
    align-items: center;
}
.card .details .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.card .details-text {
    flex-grow: 1;
}
.card .details-text .title {
    width: 85%;
    height: 20px;
    margin-bottom: 5px;
}
.card .details-text .subtitle {
    width: 60%;
    height: 20px;
}
.skeleton-screen {
    position: relative;
    background-color: #eee;
    overflow: hidden;
}

با قطعه کد بالا کارد ما به این صورت در میاد که تو تصویر پایین مشخصه:

قدم آخر:پیاده سازی افکت

خب نوبت میرسه به اینکه کارد رو از این حالت بی روح دربیاریم.

.skeleton-screen::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: skeleton-screen 1.3s infinite;
}
/*------------------------------------
    Skeleton-Screen Animation
------------------------------------*/
@keyframes skeleton-screen {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

لازمه که قطعه کد بالا رو یه توضیح کوچیک بدم،ببینید ما برای المنتی که کلاس skeleton-screen داره یه before براش تعریف کردیم که عرض و ارتفاعش 100% همون skeleton-screen هست(وقتی position رو absolute و راست،چپ،بالا و پایین رو صفر میدیم میشه 100% اولین والدی که position رو بهش relative دادیم.(تو قدم دوم به المنتی که کلاس skeleton-screen داره position رو relative دادیم)).و چیزی که اون افکت رو تشکیل میده اون بک گراند و انیمیشنی هست که دادیم.بک گراند یا پس زمینه رو از نوع گردینت تعریف کردیم که یک رنگ ثابت نباشه تا بهتر خودشو نشون بده و اون انیمیشن که آخر نوشتیم رو ببینید،کاری که میکنه اینه که این beforeی که تعریف کردیم رو تو محور افقی ببره و بیاره یا جابجا کنه،..

نکته:اگه تو قدم دوم که بالا توضیح دادم براتون سوال شده که چرا به کلاس skeleton-screen اومدم overflow رو hidden دادم بخاطر اینه که اگه اینکارو نکنیم beforeی که تعریف کردیم چون داره تو محور افقی جابجا میشه خب میاد میزنه بیرون و میره رو بقیه قسمتهای صفحه!

همیشه حالتون خوبه باشه،فعلا❤️🖐️

ارسال دیدگاه
دیدگاه ها
بهنام
بهنام
عالی
خرداد 02، 1400
جلال بهرامی راد
بهنام
عالی
جلال بهرامی راد
مرسی رفیق🖐️
خرداد 02، 1400
محمد فخرانی
محمد فخرانی
عالی پسر
خرداد 02، 1400
جلال بهرامی راد
محمد فخرانی
عالی پسر
جلال بهرامی راد
مرسی داداش❤️
خرداد 02، 1400
محمد رحیمی
محمد رحیمی
عالی بود
خرداد 05، 1400
جلال بهرامی راد
محمد رحیمی
عالی بود
جلال بهرامی راد
مرسی رفیق🖐️
خرداد 05، 1400

اشتراک گذاری در