Dagiti ag-spinner
Ipamatmat ti kasasaad ti panagkarga ti maysa a paset wenno panid nga addaan kadagiti Bootstrap spinner, a naibangon nga interamente babaen ti HTML, CSS, ken awan ti JavaScript.
Maipapan
Mabalin nga usaren dagiti bootstrap “spinners” a mangipakita iti kasasaad ti panagkarga kadagiti proyektom. Dagitoy ket naibangon laeng babaen ti HTML ken CSS, kayatna a sawen a saanmo a kasapulan ti ania man a JavaScript tapno makaaramid kadagitoy. Nupay kasta, kasapulam ti sumagmamano a kostumbre a JavaScript tapno mai-toggle ti pannakakitada. Nalaka laeng a ma-customize ti langa, panagtunos, ken kadakkelda babaen kadagiti nakaskasdaaw a klasetayo iti utilidad.
Para kadagiti panggep ti pannakagun-od, tunggal maysa a kargador ditoy ket mangiraman role="status"
ken ti maysa a naisanglad <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
panagsaludsod ti media. Kitaen ti
benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .
Pag-spinner ti beddeng
Usaren dagiti border spinners para iti nalag-an a loading indicator.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Dagiti kolor
Ti border spinner ket agus-usar currentColor
para iti daytoy border-color
, kayatna a sawen a mabalinmo nga ipasadaan ti kolor babaen dagiti utilidad ti kolor ti teksto . Mabalinmo nga usaren ti aniaman kadagiti utilidadmi iti kolor ti teksto iti gagangay nga spinner.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
utilidad? Tunggal border spinner ket mangikeddeng ti
transparent
beddeng para iti saan a basbassit ngem maysa a sikigan, isu a
.border-{color}
dagiti utilidad ket mangbalbaliwda iti dayta.
Dumakkel nga spinner
No dika magarbo iti border spinner, agsublika iti grow spinner. Nupay saan a teknikal nga agpusipos, maulit-ulit a dumakkel dayta!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Maminsan manen, daytoy nga spinner ket naibangon babaen ti currentColor
, isu a nalakam a baliwan ti langana babaen dagiti utilidad ti kolor ti teksto . Ditoy ket asul, agraman dagiti nasuportaran a variant.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Panagtunos
Dagiti spinner iti Bootstrap ket naaramid babaen rem
ti s, currentColor
, ken display: inline-flex
. Kaipapanan daytoy a nalaka laeng a mabaliwan ti kadakkelda, mabaliwan ti kolorda, ken napartak a maitunos.
Iking
Usaren dagiti margin utilities kas .m-5
para iti nalaka nga espasyo.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Panagplastar
Usaren dagiti flexbox utilities , float utilities , wenno dagiti utilidad ti panagtunos ti teksto tapno mangikabil kadagiti spinner iti eksakto a kasapulam kadagitoy iti ania man a kasasaad.
Iparayag
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Agtaytayab
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Itunos ti teksto
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Kadakkel
Inayon .spinner-border-sm
ken .spinner-grow-sm
tapno makaaramid iti basbassit nga spinner a napartak a mausar iti uneg ti dadduma a paset.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Wenno, agusar kadagiti kostumbre a CSS wenno dagiti estilo ti inline tapno baliwan dagiti dimension no kasapulan.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
Dagiti Buton
Usaren dagiti spinner iti uneg dagiti buton tapno mangipakita nga agdama a maproseso wenno mapaspasamak ti maysa nga aramid. Mabalinmo pay nga isukat ti teksto manipud iti elemento ti spinner ken usaren ti teksto ti buton no kasapulan.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">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="sr-only">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>