in English

Спинери

Наведете ја состојбата на вчитување на компонента или страница со вртежи на Bootstrap, целосно изградени со HTML, CSS и без JavaScript.

На оваа страница

За

„Spinners“ на Bootstrap може да се користат за прикажување на состојбата на вчитување во вашите проекти. Тие се изградени само со HTML и CSS, што значи дека не ви треба JavaScript за да ги креирате. Сепак, ќе ви треба прилагоден 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>

Порамнување

Спинерите во Bootstrap се изградени со rems, currentColor, и display: inline-flex. Ова значи дека тие лесно може да се променат во големина, да се обојат и брзо да се порамнат.

Маржа

Користете маргини како .m-5за лесно растојание.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Поставување

Користете ги услужните програми за flexbox , алатките за float или алатките за порамнување на текст за да ги поставите вртечите токму онаму каде што ви се потребни во секоја ситуација.

Флекс

<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;
  }
}