Fɛnɲɛnɛmaw

A’ ye yɔrɔ dɔ walima ɲɛ dɔ doni cogoya jira ni Bootstrap spinners ye, minnu jɔlen don pewu ni HTML, CSS ani JavaScript tɛ minnu na.

Nin ɲɛ in kan

Kan

Bootstrap “spinners” bɛ se ka kɛ ka doni cogoya jira i ka porozɛw kɔnɔ. U bɛ jɔ ni HTML ni CSS dɔrɔn de ye, o kɔrɔ ye ko i mago tɛ JavaScript si la walasa k’u Dabɔ. Nka, i mago bɛna kɛ JavaScript ladamu dɔw la walasa k’u yecogo caman sɛmɛntiya. U cogoya, u labɛncogo ani u bonya bɛ se ka ladilan nɔgɔya la ni an ka nafabɔ kalan kabakomaw ye.

Walasa ka se sɔrɔ, donikɛla kelen-kelen bɛɛ bɛ yan role="status"ani a nested <span class="visually-hidden">Loading...</span>.

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Dankanw tigɛli

Aw bɛ dankan sɔgɔlanw kɛ ka doni jiralan nɔgɔman sɔrɔ.

html ye

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

Kulɛriw

dankan sɛgɛsɛgɛlikɛla bɛ baara currentColorkɛ n' a border-colorye , o kɔrɔ ye ko i bɛ se ka kulɛri ladilan ni sɛbɛnni kulɛri nafamafɛnw ye . Aw bɛ se ka baara kɛ ni an ka sɛbɛnni kulɛri nafamafɛn dɔw ye standard spinner kan.

html ye

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

Mun na i tɛ baara kɛ ni border-colornafamafɛnw ye? Danyɔrɔ-spinbaga kelen-kelen bɛɛ bɛ dancɛ dɔ jira transparentfan kelen na a dɔgɔyalenba la, o la .border-{color}nafamafɛnw bɛna o tiɲɛ.

Spinner min bɛ ka bonya

Ni aw t’a fɛ ka dankan sɔgɔ, aw bɛ wuli ka taa grow spinner la. Hali n’a tɛ wuli tekniki siratigɛ la, a bɛ bonya siɲɛ caman!

html ye

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

Nin sen in fana na, nin sɛrɛkili in jɔlen bɛ ni currentColor, o la i bɛ se k’a cogoya Changer nɔgɔya la ni sɛbɛnni kulɛri nafamafɛnw ye . Yan a bɛ bulu la, ka fara dɛmɛn suguyaw kan.

html ye

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

Alignment (labɛnni).

Spinner minnu bɛ Bootstrap kɔnɔ olu bɛ jɔ ni rems, currentColor, ani display: inline-flex. O kɔrɔ ye ko u bonya bɛ se ka Changer nɔgɔya la, ka u kulɛri caman wɛrɛ kɛ, ka u labɛn joona.

Danfara

Baara kɛ ni margin utilities ye i n’a fɔ .m-5walasa ka yɔrɔjan nɔgɔya.

html ye

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

Yɔrɔ bilali

Baara kɛ ni flexbox utilities , float utilities , walima text alignment utilities ye walasa ka spinners bila yɔrɔ tigitigi la i mago bɛ u la cogo o cogo.

Ka kuru

html ye

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

Loading ka...

html ye

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

Fɔɔnɔw

html ye

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

Sɛbɛnniw bɛ ɲɔgɔn kan

html ye

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

Kundama

Aw bɛ a fara a kan .spinner-border-smani .spinner-grow-smka finimugu fitinin dɔ dilan min bɛ se ka baara kɛ joona yɔrɔ wɛrɛw kɔnɔ.

html ye

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

Walima, baara kɛ ni CSS walima inline cogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye walasa ka hakɛw Changer i n’a fɔ a mago bɛ cogo min na.

html ye

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

Butɔnw

Aw bɛ baara kɛ ni spinners ye butɔni kɔnɔ walasa k’a jira ko wale dɔ bɛ ka kɛ sisan walima min bɛ ka kɛ. Aw bɛ se fana ka sɛbɛnniw ɲɔgɔn falen-falen ka bɔ spinner element kɔnɔ ani ka baara kɛ ni butɔni sɛbɛnni ye i n’a fɔ a mago bɛ cogo min na.

html ye

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

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

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ min bɛ ka wuli ka bɔ a nɔ na, o hukumu kɔnɔ, sisan, spinners bɛ baara kɛ ni sigida CSS fɛn caman sɛgɛsɛgɛli ye waati yɛrɛyɛrɛ ladamuni kan .spinner-borderani ka ɲɛtaa sɔrɔ. .spinner-growNafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

Dankan spinner bεε bεε bε bε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;

Spinner variables minnu bɛ ka bonya:

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

Spinner fila bɛɛ la, spinner modifier classes misɛnninw bɛ kɛ ka CSS variables ninnu nafaw kuraya i n’a fɔ a mago bɛ cogo min na. Misali la, .spinner-border-smkalanso bɛ nin wale ninnu kɛ:

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

Sass bεε bε bε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;

Keyframes (kalansenw).

A bɛ Kɛ ka CSS animationw Dabɔ an ka spinners (fɔlikɛlaw) ye. A bɛ sɔrɔ scss/_spinners.scss.

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

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