Nneɛma a wɔde twitwiw nneɛma

Kyerɛ loading tebea a component anaa krataafa bi a Bootstrap spinners, a wɔde HTML, CSS, ne JavaScript biara na asi no nyinaa.

Wɔ kratafa yi so

Fa ho

Bootstrap “spinners” betumi adi dwuma de akyerɛ loading tebea wɔ wo projects mu. Wɔde HTML ne CSS nkutoo na ɛkyekye, a ɛkyerɛ sɛ wunhia JavaScript biara na wode ayɛ. Nanso, wubehia JavaScript bi a wɔahyɛ da ayɛ de ayɛ nsakrae wɔ wɔn a wotumi hu no mu. Wɔn hwɛbea, wɔn hyia, ne wɔn kɛse betumi ayɛ mmerɛw sɛ wobɛsesa denam yɛn utility adesua ahorow a ɛyɛ nwonwa no so.

Sɛnea ɛbɛyɛ a wobetumi akɔ hɔ no, loader biara a ɛwɔ ha no de role="status"ne nested <span class="visually-hidden">Loading...</span>.

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Ɔhye so spinner

Fa border spinners no di dwuma ma adesoa a emu yɛ hare ho sɛnkyerɛnne.

html na ɛwɔ hɔ

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

Kɔla ahorow

Border spinner no de di dwuma currentColorma ne border-color, a ɛkyerɛ sɛ wubetumi de text color utilities ayɛ kɔla no ho nhyehyɛe . Wubetumi de yɛn text color utilities no biara adi dwuma wɔ standard spinner no so.

html na ɛwɔ hɔ

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

Dɛn nti na womfa nneɛma a wɔde di dwuma nni border-colordwuma? Border spinner biara kyerɛ transparentborder ma anyɛ yiye koraa no ɔfã biako, enti .border-{color}utilities bɛbu saa no so.

Spinner a ɛrenyin

Sɛ wo n’ani nnye border spinner ho a, dan kɔ grow spinner no so. Bere a ɛnyɛ nea ɛkyinkyini wɔ mfiridwuma mu no, enyin mpɛn pii!

html na ɛwɔ hɔ

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

Saa bere yi nso, wɔde , na ɛyɛɛ saa spinner yi currentColor, enti ɛnyɛ den sɛ wobɛsesa ne hwɛbea denam text color utilities so . Ɛha no, ɛyɛ bruu, ne variants a wɔboa no.

html na ɛwɔ hɔ

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

Nneɛma a Wɔde Di Dwuma

remWɔde s, currentColor, ne , na ɛyɛ spinners a ɛwɔ Bootstrap mu display: inline-flex. Eyi kyerɛ sɛ ɛnyɛ den sɛ wobetumi asesa wɔn kɛse, ayɛ wɔn kɔla foforo, na wɔayɛ no pɛpɛɛpɛ ntɛmntɛm.

Ano

Fa margin utilities te sɛ nea .m-5ɛma ntam kwan yɛ mmerɛw di dwuma.

html na ɛwɔ hɔ

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

Nneɛma a wɔde bɛto hɔ

Fa flexbox utilities , float utilities , anaa text alignment utilities di dwuma de spinners si baabi pɔtee a wuhia wɔ tebea biara mu.

Da adi

html na ɛwɔ hɔ

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

Ɔde rebɔ...

html na ɛwɔ hɔ

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

Nneɛma a ɛsensɛn nsu so

html na ɛwɔ hɔ

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

Nsɛm a wɔakyerɛw no hyia

html na ɛwɔ hɔ

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

Kɛseɛ

Fa ka ho .spinner-border-smna .spinner-grow-smfa yɛ spinner ketewaa bi a wobetumi de adi dwuma ntɛmntɛm wɔ nneɛma afoforo mu.

html na ɛwɔ hɔ

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

Anaasɛ, fa CSS anaa inline styles a wɔahyɛ da ayɛ no sesa nsusuwii ahorow no sɛnea ɛho hia.

html na ɛwɔ hɔ

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

Nsɛmma nhoma no

Fa spinners a ɛwɔ buttons mu di dwuma de kyerɛ sɛ adeyɛ bi reyɛ ho adwuma mprempren anaasɛ ɛrekɔ so. Wubetumi nso sesa nsɛm no afi spinner element no mu na wode button nsɛm adi dwuma sɛnea ɛho hia.

html na ɛwɔ hɔ

<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 na ɛwɔ hɔ

<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren spinners de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ .spinner-borderne .spinner-growbere ankasa mu nsakrae a ɛkɔ anim no so. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no da so ara boa, nso.

Border spinner nsakrae ahorow:

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

Spinner nsakrae ahorow a ɛrenyin:

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

Wɔ spinners mmienu no nyinaa ho no, wɔde spinner modifier classes nketewa di dwuma de yɛ CSS variables yi botaeɛ foforɔ sɛdeɛ ɛhia. Sɛ nhwɛso no, .spinner-border-smadesuakuw no yɛ nea edidi so yi:

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

Sass nsakrae ahorow

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

Keyframes a wɔde di dwuma

Wɔde di dwuma de yɛ CSS animations no ma yɛn spinners no. Nea ɛka ho wɔ scss/_spinners.scss.

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

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