Спінеры

Пакажыце стан загрузкі кампанента або старонкі з дапамогай круцёлак 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 або ўтыліты выраўноўвання тэксту , каб размясціць круцёлкі менавіта там, дзе яны патрэбныя ў любой сітуацыі.

Флекс

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

У рамках развіваецца падыходу Bootstrap да зменных CSS, спінеры цяпер выкарыстоўваюць лакальныя зменныя 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;
  }
}