مولد Loading Spinner بـCSS

مؤشرات التحميل تخبر المستخدم أن النظام يعمل. Loaders بـCSS خالص خفيفة وسريعة دون صور أو JavaScript.

أنواع الـLoaders الشائعة

• Spinner: دائرة دوارة — الأكثر شيوعاً
• Dots: 3 نقاط تتلاشى بالتسلسل
• Bar: شريط تقدم
• Pulse: تضخم وتقلص
• Ring: دائرة ممتلئة جزئياً

كود Spinner أساسي

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

مبادئ تصميم الـLoader الجيد

• دورة 0.8-1.2 ثانية بشكل طبيعي
• استخدم ألوان علامتك التجارية
• اجعل الحجم مناسباً للسياق
• للتحميل الطويل فكر في شريط التقدم