كيف - CSS Loader
تعرف على كيفية إنشاء أداة تحميل مسبق باستخدام CSS.
كيف تصنع محمل
الخطوة 1) أضف HTML:
مثال
<div class="loader"></div>
الخطوة 2) أضف CSS:
مثال
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
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
أخيرًا ، أضفنا الرمز animation
الذي يجعل الشيء الأزرق يدور إلى الأبد بسرعة 2 ثانية للرسوم المتحركة.
ملاحظة: يجب عليك أيضًا تضمين بادئة -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;
}
مثال آخر
مثال على كيفية وضع أداة التحميل في منتصف الصفحة وإظهار "محتوى الصفحة" عند اكتمال التحميل: