Source

Спінеры

Пакажыце стан загрузкі кампанента або старонкі з дапамогай круцёлак Bootstrap, цалкам створаных з HTML, CSS і без JavaScript.

Аб

«Спінеры» Bootstrap можна выкарыстоўваць, каб паказаць стан загрузкі ў вашых праектах. Яны створаны толькі з дапамогай HTML і CSS, гэта значыць, што для іх стварэння вам не патрэбны JavaScript. Аднак вам спатрэбіцца карыстальніцкі JavaScript, каб пераключыць іх бачнасць. Іх знешні выгляд, выраўноўванне і памер можна лёгка наладзіць з дапамогай нашых дзіўных класаў карыснасці.

У мэтах даступнасці кожны загрузнік тут уключае ў сябе role="status"ўкладзены <span class="sr-only">Loading...</span>.

Бардзюрны спінер

Для індыкатара лёгкай загрузкі выкарыстоўвайце бардзюры.

<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 створаны з дапамогай rems currentColor, і display: inline-flex. Гэта азначае, што іх можна лёгка змяніць памер, перафарбаваць і хутка выраўнаваць.

Маржа

Выкарыстоўвайце ўтыліты палёў , напрыклад, .m-5для лёгкага інтэрвалу.

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

Размяшчэнне

Выкарыстоўвайце ўтыліты flexbox , утыліты float або ўтыліты выраўноўвання тэксту , каб размясціць круцёлкі менавіта там, дзе яны патрэбныя ў любой сітуацыі.

Флекс

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