Спиннерлер

Толығымен HTML, CSS және JavaScript көмегімен жасалған Bootstrap спиннерлері бар құрамдастың немесе беттің жүктелу күйін көрсетіңіз.

Бұл бетте

туралы

Bootstrap «spinners» жобаларыңыздағы жүктеу күйін көрсету үшін пайдаланылуы мүмкін. Олар тек 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 утилиталарын , қалқымалы утилиталарды немесе мәтінді туралау утилиталарын пайдаланыңыз.

Flex

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