Спинери
Наведете ја состојбата на вчитување на компонента или страница со вртежи на Bootstrap, целосно изградени со HTML, CSS и без JavaScript.
За
„Спинерите“ на Bootstrap може да се користат за прикажување на состојбата на вчитување во вашите проекти. Тие се изградени само со HTML и CSS, што значи дека не ви треба JavaScript за да ги креирате. Сепак, ќе ви треба прилагоден JavaScript за да ја вклучите нивната видливост. Нивниот изглед, усогласување и големина може лесно да се приспособат со нашите неверојатни класи за помош.
За целите на пристапноста, секој натоварувач овде вклучува role="status"
и вгнезден <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
медиумското барање. Погледнете го делот за
намалено движење од нашата документација за пристапност .
Гранично центрифугирање
Користете ги граничните вртежи за лесен индикатор за полнење.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Бои
Граничниот спиннер користи currentColor
за него border-color
, што значи дека можете да ја приспособите бојата со помошни алатки за боја на текстот . Можете да користите која било од нашите алатки за боја на текст на стандардниот спиннер.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
комунални услуги? Секое гранично вртење одредува
transparent
граница за барем една страна, така што
.border-{color}
комуналните услуги ќе го отфрлат тоа.
Растечки центрифугирање
Ако не сакате гранични центрифугирање, префрлете се на растително центрифугирање. Иако технички не се врти, постојано расте!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Повторно, овој спиннер е изграден со currentColor
, така што можете лесно да го промените неговиот изглед со помошни алатки за боја на текст . Еве го во сино, заедно со поддржаните варијанти.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Порамнување
Спинерите во Bootstrap се изградени со rem
s, currentColor
, и display: inline-flex
. Ова значи дека тие лесно може да се променат во големина, да се обојат и брзо да се порамнат.
Маржа
Користете маргини како .m-5
за лесно растојание.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Поставување
Користете ги услужните програми за flexbox , float utilities или алатките за порамнување на текст за да ги поставите вртежите токму онаму каде што ви се потребни во секоја ситуација.
Флекс
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Плови
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Порамнување на текстот
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Големина
Додадете .spinner-border-sm
и .spinner-grow-sm
за да направите помало центрифугирање што може брзо да се користи во други компоненти.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Или, користете сопствени CSS или вградени стилови за да ги промените димензиите по потреба.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">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="sr-only">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="sr-only">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>