Di wan dɛn we de spin

Sho di lod stet fɔ wan kɔmpɔnɛnt ɔ pej wit Bootstrap spina dɛn, we dɛn bil ɔlsay wit HTML, CSS, ɛn nɔ JavaSkript.

Na dis pej

Bɔt

Yu kin yuz bootstrap “spinners” fɔ sho di lod stet na yu prɔjek dɛn. Na HTML ɛn CSS nɔmɔ dɛn bil dɛn, we min se yu nɔ nid ɛni JavaSkript fɔ mek dɛn. Bɔt yu go nid sɔm kɔstɔm JavaSkript fɔ chenj di we aw dɛn de si dɛn. Dɛn apia, alaynɛshɔn, ɛn sayz kin izi fɔ kɔstɔmayt wit wi wɔndaful yutiliti klas dɛn.

Fɔ aksesibiliti pɔpɔshɔn dɛn, ɛni lod ya inklud role="status"ɛn wan nest <span class="visually-hidden">Loading...</span>.

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Di pɔsin we de spin bɔda

Yuz di bɔda spina dɛn fɔ wan layt lod indikɛtɔ.

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Kɔlɔ dɛn

Di bɔda spina de yuz currentColorfɔ in border-color, we min se yu kin kɔstɔmayz di kɔlɔ wit tɛks kɔlɔ yutiliti dɛn . Yu kin yuz ɛni wan pan wi tɛks kɔlɔ yutiliti dɛn na di standad spina.

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>

Wetin mek yu nɔ go yuz border-coloryutiliti dɛn? Ɛni bɔda spina de sho wan transparentbɔda fɔ at le wan say, so .border-{color}yutiliti dɛn go ɔvalayz dat.

Spina we de gro

If yu nɔ fansi bɔda spina, swich to di grow spina. Pan ɔl we i nɔ de spin teknik wan, i de gro bɔku bɔku tɛm!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Wans bak, dɛn bil dis spina wit currentColor, so yu kin chenj di we aw i tan izi wan wit tɛks kɔlɔ yutiliti dɛn . Na ya i de insay blu, wit di sɔpɔt we dɛn de yuz.

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>

Alignmɛnt fɔ di wan dɛn we de

Spina dɛn na Bootstrap dɛn bil wit rems, currentColor, ɛn display: inline-flex. Dis min se i izi fɔ chenj dɛn sayz, chenj dɛn kɔlɔ bak, ɛn alaynɛd kwik kwik wan.

Kɔna say

Yuz margin utilities laik .m-5fɔ izi spays.

html

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

Di ples we dɛn fɔ put am

Yuz flexbox utilities , float utilities , ɔ tɛks alaynɛshɔn yutiliti fɔ put spina dɛn jɔs usay yu nid dɛn pan ɛni sityueshɔn.

Bɛn

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

We dɛn de lod...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Flɔt dɛn

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Tekst alaynɛd

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Sayz

Ad .spinner-border-smɛn .spinner-grow-smfɔ mek wan smɔl spina we yu kin yuz kwik kwik wan insay ɔda kɔmpɔnɛnt dɛn.

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>

Ɔ, yuz kɔstɔm CSS ɔ inlayn stayl dɛn fɔ chenj di dimɛnshɔn dɛn as nid de.

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>

Bɔtin dɛn

Yuz spina dɛn insay bɔtin dɛn fɔ sho se wan akshɔn de prosɛs ɔ de apin naw. Yu kin chenj di tɛks bak kɔmɔt na di spina ɛlimɛnt ɛn yuz bɔtin tɛks as nid de.

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 we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, spina dɛn naw de yuz lokal CSS vɛriɔbul dɛn pan .spinner-borderɛn .spinner-growfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

Bɔda spina vɛriɔbul dɛn: .

  --#{$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;

Di spina vεriεbul dεm we de gro: .

  --#{$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;

Fɔ ɔl tu di spina dɛn, dɛn de yuz smɔl spina modifya klas dɛn fɔ ɔpdet di valyu dɛn fɔ dɛn CSS vɛriɔbul dɛn ya as nid de. Fɔ ɛgzampul, di .spinner-border-smklas kin du dɛn tin ya:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass di vayriɔbul dɛn

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

Kifrɛm dɛn

Yuz fɔ mek di CSS animashɔn dɛn fɔ wi spina dɛn. Insay de insay scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}