مولّد CSS لدوّامة الزر

مثال عملي

لنفترض أن لديك زر “حفظ” باللون الأزرق الداكن مع نص أبيض. في المولّد، أدخل الحجم 16 والسماكة 2 واللون #ffffff والسرعة 0.8. تنتج الأداة:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

مسار الحلقة رمادي فاتح ثابت، وهو مرئي على الزر الداكن. إذا أردت مساراً أخف، فغيّر #eee إلى قيمة شفافة مثل rgba(255, 255, 255, 0.3) في الشيفرة الملصوقة. يبقى لون القوس كما اخترته.

ضع الدوّامة داخل الزر

ضع عنصر الدوّامة قبل التسمية، واجعل الزر صفاً مرناً حتى يصطف العنصران على سطر واحد مع مسافة بينهما:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="جارٍ الحفظ"></span>
  جارٍ الحفظ
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

أضف الدوّامة وحالة disabled فقط أثناء تنفيذ الطلب، وأزلهما عند انتهائه. تعطيل الزر هو ما يمنع الإرسال المكرر، والدوّامة هي الإشارة التي تفسّر السبب.

الحجم والسماكة للأزرار

ملاحظات

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

تجنب قفزات التخطيط

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