in English

Spinneadairean

Comharraich staid luchdachadh pàirt no duilleag le snìomhadairean Bootstrap, air an togail gu tur le HTML, CSS, agus gun JavaScript.

Air an duilleig seo

Mu dheidhinn

Faodar “snìomhadairean” Bootstrap a chleachdadh gus an staid luchdachadh anns na pròiseactan agad a nochdadh. Tha iad air an togail a-mhàin le HTML agus CSS, a 'ciallachadh nach eil feum agad air JavaScript airson an cruthachadh. Ach, bidh feum agad air JavaScript àbhaisteach gus am faicsinneachd atharrachadh. Faodar an coltas, an co-thaobhadh agus am meud a ghnàthachadh gu furasta leis na clasaichean goireis iongantach againn.

Airson adhbharan ruigsinneachd, tha gach luchdan an seo a’ toirt a-steach role="status"agus nead <span class="visually-hidden">Loading...</span>.

Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

Snìomhadair crìochan

Cleachd na snìomhadairean crìche airson comharra luchdachadh aotrom.

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

Dathan

Bidh an snìomhadair crìche a’ cleachdadh currentColorairson a border-color, a’ ciallachadh gun urrainn dhut an dath a ghnàthachadh le goireasan dath teacsa . Faodaidh tu gin de na goireasan dath teacsa againn a chleachdadh air an snìomhadair àbhaisteach.

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

Carson nach cleachd thu border-colorgoireasan? Bidh gach snìomhadair crìche a’ sònrachadh transparentcrìoch airson co-dhiù aon taobh, agus mar sin .border-{color}bhiodh goireasan a’ dol thairis air sin.

Spinneadair a 'fàs

Mura h-eil thu ag iarraidh snìomhadair crìche, gluais chun an spinner fhàs. Ged nach eil e a’ snìomh gu teicnigeach, bidh e a’ fàs a-rithist is a-rithist!

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

A-rithist, tha an snìomhadair seo air a thogail le currentColor, gus an urrainn dhut a choltas atharrachadh gu furasta le goireasan dath teacsa . An seo tha e ann an gorm, còmhla ris na caochlaidhean le taic.

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

Co-thaobhadh

Tha snìomhadairean ann am Bootstrap air an togail le rems , currentColor, agus display: inline-flex. Tha seo a’ ciallachadh gum faod iad a bhith air an ath-mheudachadh gu furasta, air an ath-dhathachadh agus air an co-thaobhadh gu sgiobalta.

Iomall

Cleachd goireasan iomaill mar .m-5airson farsaingeachd furasta.

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

Suidheachadh

Cleachd goireasan flexbox , goireasan fleòdraidh , no goireasan co-thaobhadh teacsa gus snìomhadairean a chuir dìreach far a bheil feum agad orra ann an suidheachadh sam bith.

Flex

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

A' luchdachadh...

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

Flòraichean

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

Co-thaobhadh teacsa

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

Meud

Cuir ris .spinner-border-smagus .spinner-grow-smdèan snìomhadair nas lugha a ghabhas cleachdadh gu sgiobalta taobh a-staigh co-phàirtean eile.

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

No, cleachd CSS àbhaisteach no stoidhlichean in-loidhne gus na tomhasan atharrachadh mar a dh’ fheumar.

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

Putanan

Cleachd snìomhadairean taobh a-staigh putanan gus sealltainn gu bheil gnìomh a’ dol air adhart no a’ dol air adhart an-dràsta. Faodaidh tu cuideachd an teacsa atharrachadh a-mach às an eileamaid snìomh agus teacsa putan a chleachdadh mar a dh’ fheumar.

<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

Caochlaidhean

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

Keyframes

Air a chleachdadh airson beòthachaidhean CSS a chruthachadh dha na snìomhadairean againn. Air a ghabhail a-steach ann an scss/_spinners.scss.

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

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