اسپینرها
وضعیت بارگذاری یک کامپوننت یا صفحه را با اسپینرهای Bootstrap که کاملاً با HTML، CSS و بدون جاوا اسکریپت ساخته شده است، نشان دهید.
در باره
از "اسپینر" های بوت استرپ می توان برای نشان دادن وضعیت بارگذاری در پروژه های شما استفاده کرد. آنها فقط با HTML و CSS ساخته شده اند، به این معنی که برای ایجاد آنها نیازی به جاوا اسکریپت ندارید. با این حال، برای تغییر قابلیت مشاهده آنها به جاوا اسکریپت سفارشی نیاز دارید. ظاهر، تراز و اندازه آنها را می توان به راحتی با کلاس های ابزار شگفت انگیز ما سفارشی کرد.
برای اهداف دسترسی، هر بارکننده در اینجا شامل 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>
هم ترازی
اسپینرها در بوت استرپ با rem
s، currentColor
و و ساخته می display: inline-flex
شوند. این بدان معناست که می توان آنها را به راحتی تغییر اندازه داد، رنگ آنها را تغییر داد و به سرعت آنها را تراز کرد.
لبه
از ابزارهای حاشیه مانند .m-5
فاصله گذاری آسان استفاده کنید.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
تعیین سطح
از ابزارهای فلکس باکس ، ابزارهای شناور یا ابزارهای تراز متن استفاده کنید تا اسپینرها را در هر شرایطی دقیقاً در جایی که به آنها نیاز دارید قرار دهید.
فلکس
<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;
}
}