Spinners

Adierazi osagai edo orri baten karga-egoera Bootstrap biragailuekin, HTML, CSS eta JavaScript-ekin guztiz eraikia.

Orrialde honetan

Buruz

Bootstrap "spinners" erabil daiteke zure proiektuetan kargatzeko egoera erakusteko. HTML eta CSSrekin soilik eraiki dira, hau da, ez duzu JavaScript behar horiek sortzeko. Hala ere, JavaScript pertsonalizatu batzuk beharko dituzu haien ikusgarritasuna aldatzeko. Haien itxura, lerrokatzea eta tamaina erraz pertsonaliza daitezke gure erabilgarritasun klase harrigarriekin.

Irisgarritasun-helburuetarako, hemen kargatzaile bakoitzak role="status"habiaratua eta <span class="visually-hidden">Loading...</span>.

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Mugako spinnera

Erabili ertz biragailuak karga-adierazle arin baterako.

html

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

Koloreak

Ertz-spinner-ak bererako erabiltzen currentColordu border-color, hau da, kolorea pertsonaliza dezakezu testu-koloreen erabilgarritasunekin . Gure testu-kolorearen erabilgarritasunetako edozein erabil dezakezu spinner estandarrean.

html

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

Zergatik ez erabili border-colorutilitateak? Ertz biratzaile bakoitzak ertz bat zehazten du transparentgutxienez alde baterako, beraz, .border-{color}utilitateek hori gainidatziko lukete.

Hazten ari den spinner

Ez baduzu gustuko ertz-girogailurik, aldatu hazteko spinnerra. Teknikoki bira egiten ez duen arren, behin eta berriz hazten da!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Berriro ere, bira hau rekin eraikita dago currentColor, beraz, itxura erraz alda dezakezu testu-kolorearen erabilgarritasunekin . Hemen urdinez dago, onartzen diren aldaerekin batera.

html

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

Lerrokatzea

Bootstrap-eko spinner- remak s, currentColor, eta display: inline-flex. Horrek esan nahi du erraz aldatu, koloreztatu eta azkar lerrokatu daitezkeela.

Marjina

Erabili marjina-utilitateak tarte .m-5errazak izateko.

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Kokapen

Erabili flexbox utilitateak , float utilitateak edo testuak lerrokatzeko utilitateak edozein egoeratan behar dituzun tokian girak jartzeko.

Flex

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Kargatzen...

html

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

Karroza

html

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

Testua lerrokatzea

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Tamaina

Gehitu .spinner-border-smeta .spinner-grow-smbeste osagai batzuetan azkar erabil daitekeen spinner txikiagoa egiteko.

html

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

Edo, erabili CSS pertsonalizatuak edo lerroko estiloak behar den neurriak aldatzeko.

html

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

Botoiak

Erabili biragailuak botoien barruan ekintza bat prozesatzen edo gauzatzen ari dela adierazteko. Testua biragailuaren elementutik kanpo trukatu eta botoiaren testua behar duzunean erabil dezakezu.

html

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

html

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

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren baitan, spinners-ek orain CSS aldagai lokalak erabiltzen dituzte denbora errealean pertsonalizatzeko .spinner-bordereta hobetzeko. .spinner-growCSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

Ertzaren spinner aldagaiak:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Spinner hazten ari diren aldagaiak:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Bi spinnerentzat, spinner aldagai txikien klaseak erabiltzen dira CSS aldagai hauen balioak behar bezala eguneratzeko. Adibidez, .spinner-border-smklaseak honako hau egiten du:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass aldagaiak

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

Gako-fotogramak

Gure spinners CSS animazioak sortzeko erabiltzen da. -n sartuta scss/_spinners.scss.

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

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