Source

Spinners

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

Жөнүндө

Bootstrap "spinners" долбоорлоруңуздагы жүктөө абалын көрсөтүү үчүн колдонулушу мүмкүн. Алар 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 утилиталарын , флоат утилиталарын же текстти тегиздөө утилиталарын колдонуңуз .

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>

Floats

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

Buttons

Учурда иштетилип же болуп жаткан аракетти көрсөтүү үчүн баскычтардын ичиндеги спиннерлерди колдонуңуз. Сиз ошондой эле спиннер элементинен текстти алмаштырып, керек болсо баскычтын текстин колдонсоңуз болот.

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