مولّد مؤشرات التحميل بلغة CSS

كيف يعمل كود CSS المُولَّد

.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); }
}

الدوّار دائرة مرسومة بحدود سميكة. الخاصية border-top-color تلوّن الجزء العلوي من الحلقة فقط باللون المميّز، فيبدو شكل الحلقة كقوس، وتديره قاعدة @keyframes spin حول مركزها. الدوران عبر transform: rotate() يبقي الرسوم المتحركة خفيفة، لأن المتصفح يحرّك العنصر على طبقة التركيب بدلًا من إعادة رسمه إطارًا بإطار.

لعرضه في صفحة، أضف عنصرًا واحدًا وحمّل كود CSS:

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

اجعله في متناول الجميع

• أضف role="status" كي تعلن قارئات الشاشة عن الدوّار.
• ضع aria-label بنص الحالة، مثل «جارٍ التحميل».
• لا تُخفِ المحتوى خلف الدوّار لأكثر من بضع ثوانٍ دون آلية احتياطية عند انتهاء المهلة.
• احترم prefers-reduced-motion. لمن عطّل الحركة، استبدل الدوران بتلاشٍ بسيط أو بنصٍّ ثابت «جارٍ التحميل…»:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

متى تستخدم الدوّار ومتى تستخدم الواجهة المتفائلة

• استجابة أقل من 100 مللي ثانية: لا حاجة إلى دوّار؛ فالعين البشرية بالكاد تدرك التأخير.
• من 100 مللي ثانية إلى ثانية واحدة: دوّار خفيف (دائرة صغيرة، نص زرّ «جارٍ التحميل…») يمنع النقرات المزدوجة.
• من ثانية إلى 10 ثوانٍ: دوّار بارز، ويُفضّل أن يعرض التقدّم إن كان قابلاً للقياس.
• أكثر من 10 ثوانٍ: ليست مشكلة دوّار؛ اكتشف ما هو البطيء وأصلحه.

بالنسبة إلى إرسال النماذج والنقر على الأزرار، عادةً ما يكون الدوّار داخل الزرّ أفضل من طبقةٍ تغطّي الصفحة بأكملها.