Спинери

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

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

За

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

За целите на пристапноста, секој натоварувач овде вклучува role="status"и вгнезден <span class="visually-hidden">Loading...</span>.

Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Гранично центрифугирање

Користете ги граничните вртежи за лесен индикатор за полнење.

html

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

Бои

Граничниот спиннер користи currentColorза него border-color, што значи дека можете да ја приспособите бојата со помошни алатки за боја на текстот . Можете да користите која било од нашите алатки за боја на текст на стандардниот спиннер.

html

<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}комуналните услуги ќе го отфрлат тоа.

Растечки центрифугирање

Ако не сакате гранични центрифугирање, префрлете се на растително центрифугирање. Иако технички не се врти, постојано расте!

html

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

Повторно, овој спиннер е изграден со currentColor, така што можете лесно да го промените неговиот изглед со помошни алатки за боја на текст . Еве го во сино, заедно со поддржаните варијанти.

html

<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за лесно растојание.

html

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

Поставување

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

Флекс

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Се вчитува...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Плови

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Порамнување на текстот

html

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

Големина

Додадете .spinner-border-smи .spinner-grow-smза да направите помало центрифугирање што може брзо да се користи во други компоненти.

html

<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 или вградени стилови за да ги промените димензиите по потреба.

html

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

Копчиња

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

html

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

html

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

CSS

Променливи

Додадено во v5.2.0

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, спинерите сега користат локални CSS променливи на .spinner-borderи .spinner-growза подобрено прилагодување во реално време. Вредностите за променливите CSS се поставени преку Sass, така што прилагодувањето на Sass сè уште е поддржано.

Променливи на гранични центри:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Растечки вртежни променливи:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

За двата спинери, малите класи на модификатори на спиннер се користат за ажурирање на вредностите на овие CSS променливи по потреба. На пример, .spinner-border-smкласата го прави следново:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass променливи

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