Spinners

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

Бул бетте

Жөнүндө

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

Flex

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>

Floats

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>

Buttons

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

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-growCSS өзгөрмөлөрүнүн маанилери 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;
  }
}