in English

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

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod 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.

Karga ti...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Dagiti kolor

Ti border spinner ket agus-usar currentColorpara 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.

Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
<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>
Apay a dikay agusar kadagiti border-colorutilidad? Tunggal border spinner ket mangikeddeng ti transparentbeddeng 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!

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

Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
Karga ti...
<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 remti 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-5para iti nalaka nga espasyo.

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

Karga ti...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Karga ti...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Agtaytayab

Karga ti...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Itunos ti teksto

Karga ti...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Kadakkel

Inayon .spinner-border-smken .spinner-grow-smtapno makaaramid iti basbassit nga spinner a napartak a mausar iti uneg ti dadduma a paset.

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

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