كيفية إنشاء: محول التدوير CSS

تعلم كيفية استخدام CSS لإنشاء محول التحميل.

جرب بنفسك

كيفية إنشاء محول التدوير

الخطوة الأولى - إضافة HTML:

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

الخطوة الثانية - إضافة CSS:

.loader {
  border: 16px solid #f3f3f3; /* الفاتح */
  border-top: 16px solid #3498db; /* الأزرق */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

جرب بنفسك

شرح الأمثلة:

border خصائص تحديد حجم وألوان هوامش محول التدوير.border-radius خصائص تحويل محول التدوير إلى شكل دائري.

جزء الأزرق الداخلي للتدوير في الهوامش يتم تحديده بواسطة border-top خصائص تحديد. إذا كنت ترغب في الحصول على المزيد من "محولات التدوير"، يمكنك أيضًا تضمين border-bottom،border-left و/أو border-right（انظر الأمثلة أدناه）。

حجم محول التدوير يحدده width و height خصائص تحديد.

في النهاية، أضفنا عرضًا لتحويل جزء الأزرق بسرعة عرض 2 ثانية إلى الدوران الدائم.

ملاحظة:للذين لا يدعمون animation و transform المتصفح للخصائص، يجب أن تشمل أيضًا -webkit- اللافتة. انقر على مثال لمعرفة كيفية القيام بذلك.

إضافة المزيد من محولات التدوير

مثال

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

جرب بنفسك

مثال

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

جرب بنفسك

مثال

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

جرب بنفسك

مثال آخر

كيفية وضع محول في منتصف الصفحة وعرض "محتوى الصفحة" عند اكتمال التحميل:

مثال

جرب بنفسك