Spinners ƒe ƒuƒoƒo
Fia akpa alo axa aɖe ƒe agbatsɔtsɔ ƒe nɔnɔme kple Bootstrap spinners, si wotu bliboe kple HTML, CSS, eye JavaScript aɖeke mele eme o.
Ku ɖe
Woateŋu azã bootstrap “spinners” atsɔ afia agbatsɔtsɔ ƒe nɔnɔme le wò dɔwo me. HTML kple CSS koe wotsɔ tu wo, si fia be mèhiã JavaScript aɖeke hafi awɔ wo o. Gake àhiã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu be nàte ŋu atrɔ woƒe nukpɔkpɔ. Woate ŋu atrɔ asi le woƒe dzedzeme, woƒe ɖoɖo, kple woƒe lolome ŋu bɔbɔe kple míaƒe dɔwɔnu ƒe klass wɔnukuwo.
Le mɔnukpɔkpɔwo ta la, agbatsɔla ɖesiaɖe si le afisia la tsɔ role="status"
kple nested <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ
míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .
Liƒo ƒe ʋuʋudedi
Zã liƒo ƒe ʋuƒoawo hena agbatsɔtsɔ ƒe dzesi si le bɔbɔe.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Amadedewo
Liƒo ƒe ʋuʋudedi zãna currentColor
na eƒe border-color
, si fia be àteŋu atrɔ asi le amadedea ŋu kple nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo . Àte ŋu azã míaƒe nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnu ɖesiaɖe le spinner si wozãna ɖaa la dzi.
<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
nuzazãwo ƒe dɔwɔnuwo oa? Liƒodziƒomɔ̃ ɖesiaɖe gblɔa
transparent
liƒo na akpa ɖeka ya teti, eyata
.border-{color}
dɔwɔnuwo axe mɔ ɖe ema nu.
Spinner si le tsitsim
Ne mèdi be yeazã border spinner o la, ke trɔ ɖe grow spinner la ŋu. Togbɔ be metrɔna le mɔ̃ɖaŋununya nu o hã la, etsina enuenu!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Le afisia hã la, wotu spinner sia kple currentColor
, ale be nàte ŋu atrɔ eƒe dzedzeme bɔbɔe kple nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo . Le afisia la, ele blɔ me, tsɔ kpe ɖe vovototo siwo wodo alɔe ŋu.
<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>
Ðoɖowɔwɔ ɖe ɖoɖo nu
Wotsɔa rem
s, currentColor
, kple display: inline-flex
. Esia fia be woate ŋu atrɔ asi le woƒe lolome ŋu bɔbɔe, atrɔ asi le woƒe amadede ŋu, eye woate ŋu aɖo wo ɖe ɖoɖo nu kabakaba.
Axadzi
Zã margin utilities abe .m-5
na dometsotso bɔbɔe ene.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Amewo ɖoɖo ɖe teƒe aɖe
Zã flexbox utilities , float utilities , alo text alignment utilities nàtsɔ aɖo spinners ɖe afisi tututu nèhiã wo le le nɔnɔme ɖesiaɖe me.
Do eɖokui ɖe dzi
<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>
Etsia tsia dzi
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Nuŋɔŋlɔawo nasɔ ɖe ɖoɖo nu
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Lolome
Tsɔe kpe ɖe eŋu .spinner-border-sm
eye .spinner-grow-sm
be nàwɔ ʋuƒo sue aɖe si woate ŋu azã kaba le akpa bubuwo me.
<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>
Alo, zã CSS alo atsyã siwo wowɔ ɖe fli me ƒe atsyã tɔxɛwo nàtsɔ atrɔ didimeawo ne ehiã.
<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>
Abɔtawo ƒe ƒuƒoƒo
Zã ʋuƒo siwo le abɔtawo me nàtsɔ afia be nuwɔna aɖe le dɔ wɔm alo le edzi yim fifia. Àte ŋu aɖɔli nuŋɔŋlɔa hã le spinner element la me eye nàzã button text ne ehiã.
<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 ƒe nyawo
Nusiwo trɔna
$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;
Keyframewo ƒe nɔnɔmetatawo
Wozãnɛ hena CSS ƒe nɔnɔmetatawo wɔwɔ na míaƒe spinners. Wo dometɔ aɖewoe nye scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}