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.
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>
.
prefers-reduced-motion
media ɲ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 currentColor
kɛ n' a border-color
ye , 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>
border-color
nafamafɛnw ye? Danyɔrɔ-spinbaga kelen-kelen bɛɛ bɛ dancɛ dɔ jira
transparent
fan 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 rem
s, 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-5
walasa 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>
<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-sm
ani .spinner-grow-sm
ka 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;
}
}