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.

html

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

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>

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!

html

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

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>

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.

html

<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

html

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

A' luchdachadh...

html

<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

html

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

Co-thaobhadh teacsa

html

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

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>

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

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>

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.

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

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap a tha a’ fàs, bidh luchd-snìomh a-nis a’ cleachdadh caochladairean CSS ionadail air .spinner-borderagus .spinner-growairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

Caochladairean snìomhadair crìochan:

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

Caochladairean snìomhadair a’ fàs:

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

Airson an dà shnìomhadair, bidh clasaichean mion-atharrachaidh snìomhadair gan cleachdadh gus luachan nan caochladairean CSS sin ùrachadh mar a dh’ fheumar. Mar eisimpleir, bidh an .spinner-border-smclas a’ dèanamh na leanas:

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

caochladairean Sass

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