الغزالون
حدد حالة تحميل أحد المكونات أو الصفحة باستخدام أقراص Bootstrap التي تم إنشاؤها بالكامل باستخدام HTML و CSS وبدون JavaScript.
حول
يمكن استخدام Bootstrap "spinners" لإظهار حالة التحميل في مشروعاتك. لقد تم إنشاؤها باستخدام HTML و CSS فقط ، مما يعني أنك لست بحاجة إلى أي JavaScript لإنشائها. ومع ذلك ، ستحتاج إلى بعض جافا سكريبت مخصص لتبديل رؤيتها. يمكن تخصيص مظهرها ومواءمتها وحجمها بسهولة من خلال فئات المرافق المذهلة لدينا.
لأغراض إمكانية الوصول ، يشتمل كل محمل هنا role="status"
على ملف <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
الاستعلام عن الوسائط. راجع
قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .
الدوار الحدودي
استخدم الدوافع الدوارة لمؤشر تحميل خفيف الوزن.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
الألوان
يستخدم الحد الدوار currentColor
من أجله border-color
، مما يعني أنه يمكنك تخصيص اللون باستخدام أدوات مساعدة لون النص . يمكنك استخدام أي من أدوات ألوان النص المساعدة على القرص الدوار القياسي.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
border-color
المرافق؟ تحدد كل أداة تدوير حدية حدًا
transparent
لجانب واحد على الأقل ، لذلك
.border-{color}
ستتجاوز الأدوات المساعدة ذلك.
تزايد الدوار
إذا كنت لا تتخيل قرصًا دوارًا حدوديًا ، فقم بالتبديل إلى أداة زيادة التدوير. في حين أنه لا يدور من الناحية الفنية ، فإنه ينمو بشكل متكرر!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
مرة أخرى ، تم تصميم هذا القرص الدوار currentColor
، بحيث يمكنك بسهولة تغيير مظهره باستخدام أدوات ألوان النص . هنا باللون الأزرق ، جنبًا إلى جنب مع المتغيرات المدعومة.
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
محاذاة
تم تصميم Spinners في Bootstrap باستخدام rem
s currentColor
و و display: inline-flex
. هذا يعني أنه يمكن بسهولة تغيير حجمها وإعادة تلوينها ومحاذاتها بسرعة.
حافة
استخدم أدوات الهامش مثل .m-5
التباعد السهل.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
تحديد مستوى
استخدم أدوات Flexbox المساعدة ، أو أدوات الطفو ، أو أدوات محاذاة النص لوضع الأزرار في المكان الذي تريده بالضبط في أي موقف.
ثني
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
يطفو
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
محاذاة النص
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
بحجم
أضف .spinner-border-sm
وصنع .spinner-grow-sm
قرصًا أصغر حجمًا يمكن استخدامه بسرعة داخل المكونات الأخرى.
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
أو استخدم أنماط CSS مخصصة أو أنماط مضمنة لتغيير الأبعاد حسب الحاجة.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
أزرار
استخدم الأزرار الموجودة داخل الأزرار للإشارة إلى إجراء قيد المعالجة أو قيد التنفيذ حاليًا. يمكنك أيضًا تبديل النص من عنصر الزيادة واستخدام نص الزر حسب الحاجة.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
ساس
المتغيرات
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
الإطارات الرئيسية
تُستخدم لإنشاء الرسوم المتحركة لـ CSS لأدوات الدوران لدينا. المدرجة في scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}