Kyerɛ loading tebea a component anaa krataafa bi a Bootstrap spinners, a wɔde HTML, CSS, ne JavaScript biara na asi no nyinaa.
Fa ho
Bootstrap “spinners” betumi adi dwuma de akyerɛ loading tebea wɔ wo projects mu. Wɔde HTML ne CSS nkutoo na ɛkyekye, a ɛkyerɛ sɛ wunhia JavaScript biara na wode ayɛ. Nanso, wubehia JavaScript bi a wɔahyɛ da ayɛ de ayɛ nsakrae wɔ wɔn a wotumi hu no mu. Wɔn hwɛbea, wɔn hyia, ne wɔn kɛse betumi ayɛ mmerɛw sɛ wobɛsesa denam yɛn utility adesua ahorow a ɛyɛ nwonwa no so.
Sɛnea ɛbɛyɛ a wobetumi akɔ hɔ no, loader biara a ɛwɔ ha no de role="status"ne nested <span class="sr-only">Loading...</span>.
Ɔhye so spinner
Fa border spinners no di dwuma ma adesoa a emu yɛ hare ho sɛnkyerɛnne.
Ɔde rebɔ...
Kɔla ahorow
Border spinner no de di dwuma currentColorma ne border-color, a ɛkyerɛ sɛ wubetumi de text color utilities ayɛ kɔla no ho nhyehyɛe . Wubetumi de yɛn text color utilities no biara adi dwuma wɔ standard spinner no so.
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Dɛn nti na womfa nneɛma a wɔde di dwuma nni border-colordwuma? Border spinner biara kyerɛ transparentborder ma anyɛ yiye koraa no ɔfã biako, enti .border-{color}utilities bɛbu saa no so.
Spinner a ɛrenyin
Sɛ wo n’ani nnye border spinner ho a, dan kɔ grow spinner no so. Bere a ɛnyɛ nea ɛkyinkyini wɔ mfiridwuma mu no, enyin mpɛn pii!
Ɔde rebɔ...
Saa bere yi nso, wɔde , na ɛyɛɛ saa spinner yi currentColor, enti ɛnyɛ den sɛ wobɛsesa ne hwɛbea denam text color utilities so . Ɛha no, ɛyɛ bruu, ne variants a wɔboa no.
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Ɔde rebɔ...
Nneɛma a Wɔde Di Dwuma
remWɔde s, currentColor, ne , na ɛyɛ spinners a ɛwɔ Bootstrap mu display: inline-flex. Eyi kyerɛ sɛ ɛnyɛ den sɛ wobetumi asesa wɔn kɛse, ayɛ wɔn kɔla foforo, na wɔayɛ no pɛpɛɛpɛ ntɛmntɛm.
Ano
Fa margin utilities te sɛ nea .m-5ɛma ntam kwan yɛ mmerɛw di dwuma.
Fa ka ho .spinner-border-smna .spinner-grow-smfa yɛ spinner ketewaa bi a wobetumi de adi dwuma ntɛmntɛm wɔ nneɛma afoforo mu.
Ɔde rebɔ...
Ɔde rebɔ...
Anaasɛ, fa CSS anaa inline styles a wɔahyɛ da ayɛ no sesa nsusuwii ahorow no sɛnea ɛho hia.
Ɔde rebɔ...
Ɔde rebɔ...
Nsɛmma nhoma no
Fa spinners a ɛwɔ buttons mu di dwuma de kyerɛ sɛ adeyɛ bi reyɛ ho adwuma mprempren anaasɛ ɛrekɔ so. Wubetumi nso sesa nsɛm no afi spinner element no mu na wode button nsɛm adi dwuma sɛnea ɛho hia.