Ndị na-agbagharị agbagharị

Gosipụta ọnọdụ nbudata nke akụrụngwa ma ọ bụ ibe nwere ndị na-agbagharị Bootstrap, ejiri HTML, CSS, na enweghị Javascript rụọ kpamkpam.

Na ibe a

Ihe gbasara

Enwere ike iji “spinners” bootstrap gosi ọkwa nbudata na ọrụ gị. Ejiri HTML na CSS rụọ ha, nke pụtara na ịchọghị Javascript ọ bụla iji mepụta ha. Otú ọ dị, ị ga-achọ ụfọdụ Javascript omenala iji gbanwee visibiliti ha. Enwere ike ịhazi ọdịdị ha, nhazi na nha ha n'ụzọ dị mfe site na klaasị ịba uru dị ịtụnanya.

Maka ebumnuche nnweta, onye na-ebu ibu ọ bụla ebe a gụnyere role="status"yana akwụkwụ <span class="visually-hidden">Loading...</span>.

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Ọkpụkpụ okirikiri

Jiri spinner oke ala maka ihe ngosi nbunye dị fechaa.

html

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

Agba

The ókè-ala spinner na-eji currentColorya border-color, nke pụtara na ị nwere ike hazie agba na ederede utilities . Ị nwere ike iji ngwa ọ bụla nke agba ederede anyị na spinner ọkọlọtọ.

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>

Gịnị kpatara na ị gaghị eji border-colorakụrụngwa? Ọkpụkpụ oke ọ bụla na-akọwapụta transparentoke maka opekata mpe otu akụkụ, yabụ .border-{color}akụrụngwa ga-ewepụ nke ahụ.

Spinner na-eto eto

Ọ bụrụ na ịmasịghị spinner oke, gbanwee gaa na spinner na-eto eto. Ọ bụ ezie na ọ naghị atụgharị na teknụzụ, ọ na-eto ugboro ugboro!

html

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

Ọzọkwa, a na-eji spinner arụ ya currentColor, yabụ ị nwere ike ịgbanwe ọdịdị ya ngwa ngwa site na iji ngwa ederede ederede . Ebe a na-acha anụnụ anụnụ, yana ụdị akwadoro.

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>

Nhazi

Eji rems, currentColor, na display: inline-flex. Nke a pụtara na enwere ike gbanwee ha n'ụzọ dị mfe, gbanwee agba, na ịhazi ngwa ngwa.

Oke

Jiri akụrụngwa oke dị ka .m-5maka oghere dị mfe.

html

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

Ndokwa

Jiri flexbox utilities , float utilities , ma ọ bụ ederede alignment utilities idobe spinners kpọmkwem ebe ị chọrọ ha n'ọnọdụ ọ bụla.

Flex

html

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

Na-ebu...

html

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

Na-ese n'elu

html

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

Nhazi ederede

html

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

Nha

Tinye .spinner-border-smna .spinner-grow-smime obere spinner nke enwere ike iji ngwa ngwa n'ime ihe ndị ọzọ.

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>

Ma ọ bụ, jiri CSS omenala ma ọ bụ ụdị ahịrị iji gbanwee akụkụ dịka achọrọ.

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ọtịnụ

Jiri spinners n'ime bọtịnụ gosi na a na-ahazi ma ọ bụ na-eme ugbu a. Ị nwekwara ike gbanwee ederede na akụkụ spinner wee jiri ederede bọtịnụ dị ka achọrọ.

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

Mgbanwe

Agbakwunyere na v5.2.0

Dị ka akụkụ nke mgbanwe mgbanwe CSS nke Bootstrap, ndị na-agbagharị na-ejizi mgbanwe CSS mpaghara .spinner-borderna .spinner-growmaka nkwalite nhazi oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

Ngbanwe ntụgharị oke ala:

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

Ndị mgbanwe spinner na-eto eto:

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

Maka ndị na-agba agba abụọ ahụ, a na-eji obere klaasị modifier na-emelite ụkpụrụ nke mgbanwe CSS ndị a ka ọ dị mkpa. Dịka ọmụmaatụ, .spinner-border-smklas ahụ na-eme ihe ndị a:

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

Sass variables

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

Igwe igodo

Eji maka imepụta animation CSS maka ndị na-agbagharị anyị. Agụnyere na scss/_spinners.scss.

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

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