نحوه ایجاد و استفاده از اسکلت لودر: یک مثال ساده [Part 2]

عکس پروفایل نویسنده

در این پست ، مرحله به مرحله به اجرای واقعی Skeleton Loader خواهیم پرداخت.

اولین پست این مجموعه متمرکز بر ارائه نمای کلی از
اسکلت لودر ، هدف ، کاربرد و نکاتی که باید در خاطر داشته باشید
طراحی.
اگر هنوز در مورد مفهوم اطمینان ندارید ، به Skeleton Loader مراجعه کنید: یک نمای کلی ، هدف ، کاربرد و طراحی

مراحل درگیر:

  • یک پس زمینه طراحی کنید
  • Gradient را طراحی کنید
  • Animate Gradient
  • نمایش لودر فقط برای مکان یابهای خالی
  • اجرای کامل

ما باید زمینه را برای متغیرهایی که محتوا در آن نیست ، نگه داریم
بارگیری نشده است این مکان یاب های بصری باید به رنگ خاکستری روشن یا باشند
رنگهای خنثی

<div	🅐
    <span class="skeleton-loader-background"span	🅑
div
.skeleton-loader-background {
  width: 100%;
  height: 15px;
  display: block;
  background: lightgray;       🅒
}

آ. برای بارگذاری محتوا بخشی ایجاد کنید.

ب ایجاد کردن

داخل آن بخش برای افزودن قلاب به متن. یک کلاس “skeleton-loader-background” برای پس زمینه یک ظاهر طراحی شده اختصاص دهید.

ج مشخص كردن

background

با رنگ خاکستری روشن.

تصویر: پس زمینه لودر اسکلت

<div
	<span class="skeleton-loader-gradient"span		🅐
div
.skeleton-loader-gradient {
  width: 100%;
  height: 15px;
  display: block;
  background: linear-gradient(        🅑
      to right,
      rgba(255, 255, 255, 0),
      rgba(255,...