في هذا الدرس 5تصفّح المواضيع
- عنصر spinner او loader هو زرار انتظار نظهره للزوار قبل حدوث شئ ما ثم نقوم باخفاءه بعد فتره زمنية.
- نقوم باضافة كلاس spinner-border الى العنصر الذي نريد تحويله الى spinner.
Spinners
عمل spinner باستخدام كلاس spinner-border
- يمكن استخدام الوان النصوص text color utilities لتغيير الوان spinners العناصر الدوارة.
- يتم اضافة كلاس *-text حيث * هي احد هذه القيم ( primary - secondary - muted - info - success - danger - warning - dark - light ).
Colored Spinners
تغيير الوان اي spinner
HTML
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>بدلا من عمل spinner يدور حول نفسه فقط, يمكن استخدام شكل اخر لاي spinner element عن طريق اضافة كلاس مختلف وهو spinner-grow الذي يطبق نوعا مختلفا من animation حيث يبدا spinner بشفافية صفر وحجم صفر ثم يزداد تدريجا حتى تصبح الشفافية والحجم 100%.
Growing Spinner
مثال على استخدام كلاس spinner-grow
HTML
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div> يمكن اضافة كلاس spinner-border-sm او spinner-grow-sm بجوار كلاس spinner-grow & spinner-border الاصليين لعمل spinner ذو حجم صغير.
Spinner Size
عمل spinner صغير باستخدام كلاس spinner-border-sm و spinner-grow-sm.
HTML
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div> يمكن استعما كلاس spinner-grow & spinner-border مع buttons الازار او مع العناصر التي بداخل الزر لعمل spinner buttons باكثر من تصميم.
Spinner Buttons
استخدام كل كلاسات spinners مع الازرار.
HTML
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.