مولّد CSS لدوّامة الطبقة المتراكبة

جزءان: الدوّامة والطبقة

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

شيفرة الغلاف

ألصق هذا بعد القواعد المولّدة:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

تمدد position: fixed مع inset: 0 الطبقة إلى الحواف الأربع للشاشة. أما إعدادات flex فتضع الدوّامة في المنتصف في الاتجاهين. وتحافظ z-index على ظهور الطبقة فوق المحتوى العادي، فارفعها إذا بقي رأس الصفحة أو نافذة منبثقة فوقها.

تغطية منطقة واحدة بدلاً من الصفحة

إذا كانت بطاقة أو جدول فقط يحمّل بياناته، فاجعل حاوية العنصر position: relative وغيّر الغلاف إلى position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

تبقى بقية الصفحة قابلة للاستخدام، ويصبح تعتيم تلك البطاقة وحدها.

اختر لون الطبقة بما يناسب الصفحة

على الصفحة الداكنة، غيّر أيضاً لون المسار #eee في شيفرة الدوّامة الملصوقة، حتى لا تتوهج الحلقة بقوة.

ممارسات جيدة

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

امنع تمرير الصفحة

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