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.

Iti daytoy a panid

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="visually-hidden">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.

<div class="spinner-border" role="status">
  <span class="visually-hidden">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.

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

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!

<div class="spinner-grow" role="status">
  <span class="visually-hidden">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="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>

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.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">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="visually-hidden">Loading...</span>
  </div>
</div>

Karga ti...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Agtaytayab

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Itunos ti teksto

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">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.

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

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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">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="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 nga

Dagiti Variable

$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;

Dagiti Keyframe

Nausar para iti panagaramid kadagiti animasion ti CSS para kadagiti spinnermi. Nairaman iti scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}