نحوه ایجاد و استفاده از اسکلت لودر: یک مثال ساده [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,...