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.

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