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

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

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

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

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

<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

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

Loading ka...

<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

<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

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

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

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

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

Yɛlɛma-yɛlɛmaw

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