مولّد CSS لدوّامة التحميل

ما الذي تحصل عليه

يكتب المولّد قاعدتين: صنف .loader وكتلة @keyframes spin. يرسم الصنف دائرة، ويمنحها حلقة رمادية فاتحة، ويلوّن الحافة العلوية من تلك الحلقة. تدير الإطارات الرئيسية الدائرة دورة كاملة، ويكرر سطر animation ذلك إلى ما لا نهاية. لا حاجة لشيء آخر: لا ملف صورة ولا خط أيقونات ولا سكربت.

بالقيم الافتراضية (60 بكسل، وحلقة 6 بكسل، و#10b981، وثانية واحدة)، يبدو الناتج هكذا:

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

أضفها إلى صفحتك

ألصق الشيفرة CSS في ورقة الأنماط، ثم أضف عنصراً فارغاً واحداً حيث يجب أن تظهر الدوّامة:

<div class="loader" role="status" aria-label="جارٍ التحميل"></div>

اعرض العنصر أثناء تنفيذ العمل، وأزله، أو أخفه بخاصية display: none، عند وصول المحتوى. تتيح السمتان role وaria-label لقارئات الشاشة إعلان الحالة.

أحجام مناسبة

قاعدة عملية: تكون السماكة نحو عُشر القطر. السماكة الأرفع بكثير تبدو باهتة على الشاشات عالية الدقة، والأثخن بكثير تحوّل الحلقة إلى كتلة.

أمور ينبغي معرفتها

• لون المسار ثابت على الرمادي الفاتح (#eee). على خلفية داكنة، عدّل هذه القيمة في الشيفرة الملصوقة.
• تنتج الأداة دوّامة دائرية واحدة. النقاط والأشرطة وأشكال أخرى تحتاج إلى ترميز مختلف.
• إذا كان في مشروعك صنف باسم loader أو حركة باسم spin، فأعد تسميتهما في الشيفرة الملصوقة حتى لا تتعارض القواعد.

إظهار الدوّامة وإخفاؤها

ينبغي أن تظهر دوّامة التحميل عند بدء العمل، وأن تختفي عند انتهائه. نمط بسيط هو الإبقاء على السمة hidden في العنصر، وإزالتها عند بدء الطلب. وإذا كان الانتظار قصيراً عادةً، فأضف تأخيراً صغيراً بضع مئات من الملّي ثانية قبل إظهار الحلقة، حتى لا يومض مؤشر لاستجابة فورية. وأياً كان اختيارك، أخفِ الدوّامة أيضاً عند حدوث خطأ، وإلا سينتظر الزوار شيئاً فشل بالفعل.