in English

Спиннерлер

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

туралы

Bootstrap «spinners» жобаларыңыздағы жүктеу күйін көрсету үшін пайдаланылуы мүмкін. Олар тек HTML және CSS көмегімен жасалған, яғни оларды жасау үшін JavaScript қажет емес. Дегенмен, олардың көріну мүмкіндігін ауыстыру үшін сізге кейбір реттелетін JavaScript қажет болады. Олардың сыртқы түрін, туралануын және өлшемдерін таңғажайып утилиталарымызбен оңай реттеуге болады.

Арнайы мүмкіндіктер үшін мұндағы әрбір жүктеуші role="status"және кірістірілген <span class="sr-only">Loading...</span>.

Бұл компоненттің анимациялық әсері prefers-reduced-motionмедиа сұрауына байланысты. Арнайы мүмкіндіктер құжаттамасының қысқартылған қозғалыс бөлімін қараңыз .

Шекара спиннері

Жеңіл жүктеу индикаторы үшін жиек спиннерлерін пайдаланыңыз.

Жүктелуде...
<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 утилиталарын , қалқымалы утилиталарды немесе мәтінді туралау утилиталарын пайдаланыңыз.

Flex

Жүктелуде...
<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>