مولّد دوّامة CSS البسيطة

لماذا هذه الدوّامة بسيطة

كثير من مؤشرات التحميل تستخدم عناصر متداخلة عدة، أو صور خلفية، أو سكربتاً. أما هذه فعنصر div واحد منسّق كدائرة. الحلقة مكوّنة من حد، ولا يختلف لون إلا الجزء العلوي من هذا الحد. تدوير الدائرة يجعل ذلك الجزء الملوّن يتحرك حولها. التقنية كلها أربع أفكار:

1. صندوق مربع متساوي العرض والارتفاع.
2. border-radius: 50% لتحويل الصندوق إلى دائرة.
3. حد رمادي مع جانب واحد ملوّن، عبر border-top-color.
4. حركة دوران لا تتوقف أبداً.

الشيفرة الكاملة

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

<div class="loader"></div>

هذه هي الدوّامة كاملةً. لا يوجد ما تنزّله، ولا تبعية تحتاج إلى تحديث.

توسيطها

الحلقة عنصر كتلي عادي. لتوسيطها في الصفحة أو داخل حاوية، أضف margin: 0 auto; إلى .loader للتوسيط الأفقي، أو اجعل الحاوية الأم flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

ما الذي لا تفعله هذه الأداة

• تنشئ نمط الحلقة فقط. صفوف النقاط والأشرطة وتأثيرات النبض تصاميم مختلفة.
• لون المسار ثابت على الرمادي الفاتح، وعدّله في الشيفرة الملصوقة إذا كانت خلفيتك داكنة.
• لا تضيف سمات إمكانية الوصول إلى ترميزك. أضف role="status" وaria-label إلى العنصر بنفسك.

تعديلات صغيرة بعد النسخ

بما أن الدوّامة مكوّنة من بضع خصائص فقط، فالتعديل سهل. لجعل الحلقة أخف، قلّل عرض الحد. ولجعلها أهدأ، زِد زمن الحركة. ولاستخدام المؤشر نفسه بحجمين، انسخ الصنف مرة واحدة، وعدّل width وheight وborder-width فقط في صنف ثانٍ. قصر الشيفرة هو الميزة الأساسية للدوّامة البسيطة: تقرأها كلها بنظرة واحدة، وتغيّر أي قيمة دون البحث في مكتبة.

يمكنك أيضاً تلوين المسار بتغيير #eee إلى لون يناسب صفحتك، بينما يحتفظ القوس المتحرك باللون الذي اخترته في المولّد.