# هياكل تحميل متحركة باستخدام Tailwind CSS

> ابنِ هياكل تحميل متحركة باستخدام Tailwind CSS مع تأثير اللمعان، لتعرض واجهة مؤقتة ريثما يُحمَّل المحتوى الحقيقي.

بقلم Shodipo Ayomide، نُشرت في 18 يوليو 2022. نسخة الويب: https://blog.shodipoayomide.com/ar/animated-loading-skeletons-with-tailwind

<div className="grid grid-cols-2 gap-6 sm:grid-cols-3">
  <div>
    
  </div>
  <div>
    
  </div>
  <div className="hidden sm:block">
    
  </div>
</div>

# الهيكل

- استخدم مجموعة أصناف الأدوات (utility classes) في Tailwind لإنشاء هيكل يشبه تقريبًا المحتوى الذي توشك على تحميله.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px] space-y-5 rounded-2xl bg-white/5 p-4">
      <div className="h-24 rounded-lg bg-rose-100/10"></div>
      <div className="space-y-3">
        <div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
        <div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
        <div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
      </div>
    </div>
  </div>
  ```html
  <div class="space-y-5 rounded-2xl bg-white/5 p-4">
    <div class="h-24 rounded-lg bg-rose-100/10"></div>
    <div class="space-y-3">
      <div class="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
      <div class="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
      <div class="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
    </div>
  </div>
  ```
</div>

# طبقة التدرّج

- استخدم نقاط توقف ألوان التدرّج في Tailwind لإنشاء تدرّج يتلاشى من الشفاف إلى الأبيض ثم يعود إلى الشفاف.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="h-48 bg-gradient-to-r from-transparent via-rose-100/20 to-transparent"></div>
    </div>
  </div>
  ```html
  <div
    class="
      [...]
      bg-gradient-to-r from-transparent via-rose-100/10 to-transparent"
  ></div>
  ```
</div>

# الحركة

- عرّف حركة CSS عبر keyframes تُزيح العناصر بنسبة 100% نحو اليمين، داخل كائن keyframes ضمن extend في `tailwind.config.js`.
- استخدم القيم الاعتباطية (arbitrary values) في Tailwind لتطبيق حركة keyframes على عنصر الطبقة العلوية.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="relative h-48 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-rose-100/20 to-transparent"></div>
    </div>
  </div>
  ```json
  {
    "keyframes": {
      "shimmer": {
        "100%": {
          "transform": "translateX(100%)",
        },
      },
    }
  },
  ```
  ```html
  <div class="[...] -translate-x-full animate-[shimmer_2s_infinite]"></div>
  ```
</div>

# دمج الهيكل مع حركة الطبقة العلوية

- أضف الطبقة العلوية إلى عنصر زائف (pseudo-element) في الغلاف المحيط بالهيكل باستخدام المُعدِّل `before:` في Tailwind.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="relative space-y-5 rounded-2xl bg-white/5 p-4 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-rose-100/10 before:to-transparent">
        <div className="h-24 rounded-lg bg-rose-100/10"></div>
        <div className="space-y-3">
          <div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
          <div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
          <div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
        </div>
      </div>
    </div>
  </div>
  ```html
  <div
    class="
      [...]
      relative 
      before:absolute before:inset-0
      before:-translate-x-full
      before:animate-[shimmer_2s_infinite]
      before:bg-gradient-to-r
      before:from-transparent before:via-rose-100/10 before:to-transparent"
  >
    [...]
  </div>
  ```
</div>

# اللمسات الأخيرة

- أخفِ الطبقة العلوية ما دامت موضوعة خارج الهيكل.
- أضف ظلًّا إلى الهيكل.
- أضف حدًّا خفيفًا إلى أعلى الطبقة العلوية لمحاكاة انعكاس الضوء.
- يمكنك إصلاح مشكلة تجاوز الحركة للزوايا المستديرة في Safari باستخدام `isolate`.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="relative isolate space-y-5 overflow-hidden rounded-2xl bg-white/5 p-4 shadow-xl shadow-black/5 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-rose-100/10 before:bg-gradient-to-r before:from-transparent before:via-rose-100/10 before:to-transparent">
        <div className="h-24 rounded-lg bg-rose-100/10"></div>
        <div className="space-y-3">
          <div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
          <div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
          <div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
        </div>
      </div>
    </div>
  </div>
  ```html
  <div
    class="
      [...]
      isolate
      overflow-hidden
      shadow-xl shadow-black/5
      before:border-t before:border-rose-100/10"
  >
    [...]
  </div>
  ```
</div>