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.

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

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

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

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

<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

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

Ɔde rebɔ...

<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

<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

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

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

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

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

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

Sass

Nneɛma a Ɛsakra

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