Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
Check
in English

Spinners

Léirigh staid luchtaithe comhpháirte nó leathanaigh le rothlóirí Bootstrap, tógtha go hiomlán le HTML, CSS, agus gan JavaScript.

Faoi

Is féidir “sreangóirí” Bootstrap a úsáid chun staid luchtaithe do thionscadail a thaispeáint. Níl siad tógtha ach le HTML agus CSS, rud a chiallaíonn nach bhfuil JavaScript ag teastáil uait chun iad a chruthú. Beidh roinnt JavaScript saincheaptha uait, áfach, chun a n-infheictheacht a scoránaigh. Is féidir a gcuma, a ailíniú, agus a méid a shaincheapadh go héasca lenár ranganna fóntais iontacha.

Chun críocha inrochtaineachta, cuimsíonn gach lódóir anseo role="status"agus nead <span class="visually-hidden">Loading...</span>.

Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Rothaí teorann

Bain úsáid as na rothlóirí teorann le haghaidh táscaire luchtaithe éadrom.

Á lódáil...
html
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Dathanna

Úsáideann an rothlóir teorann currentColordá chuid border-color, rud a chiallaíonn gur féidir leat an dath a shaincheapadh le fóntais datha téacs . Is féidir leat aon cheann dár bhfóntais datha téacs a úsáid ar an rothlóir caighdeánach.

Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
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>
Cén fáth nach n-úsáideann tú border-colorfóntais? Sonraíonn gach rothlóir transparentteorann teorainn le haghaidh taobh amháin ar a laghad, agus mar sin .border-{color}sháródh fóntais é sin.

spinner ag fás

Mura bhfuil fonn ort rothlóir teorann, aistrigh chuig an rothlóir fáis. Cé nach n-iompaíonn sé go teicniúil, fásann sé arís agus arís eile!

Á lódáil...
html
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Arís eile, tógtar an rothlóir seo le currentColor, ionas gur féidir leat a chuma a athrú go héasca le fóntais dath téacs . Anseo tá sé i gorm, chomh maith leis na leaganacha tacaithe.

Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
Á lódáil...
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>

Ailíniú

Tógtar rothlóirí i Bootstrap le rems , currentColor, agus display: inline-flex. Ciallaíonn sé seo gur féidir iad a athrú go héasca, a dhathú agus a ailíniú go tapa.

Imeall

Bain úsáid as fóntais corrlaigh mar .m-5spásáil éasca.

Á lódáil...
html
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Socrúchán

Úsáid fóntais flexbox , fóntais snámhphointe , nó fóntais ailínithe téacs chun rothlóirí a chur go díreach san áit a dteastaíonn uait iad in aon chás.

Flex

Á lódáil...
html
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
Á lódáil...
html
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Snámháin

Á lódáil...
html
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Ailíniú téacs

Á lódáil...
html
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Méid

Cuir leis .spinner-border-smagus .spinner-grow-smchun rothlóir níos lú a dhéanamh ar féidir é a úsáid go tapa laistigh de chomhpháirteanna eile.

Á lódáil...
Á lódáil...
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>

Nó, bain úsáid as CSS saincheaptha nó stíleanna inlíne chun na toisí a athrú de réir mar is gá.

Á lódáil...
Á lódáil...
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>

Cnaipí

Úsáid rothlóirí laistigh de chnaipí chun a chur in iúl go bhfuil gníomh á phróiseáil nó ar siúl faoi láthair. Is féidir leat freisin an téacs a mhalartú amach as an eilimint rothlaithe agus úsáid a bhaint as téacs cnaipe de réir mar is gá.

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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann rothlóirí athróga áitiúla CSS anois ar .spinner-borderagus .spinner-growle haghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

Athróga rothlóra teorann:

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

Athróga spinner atá ag 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;
  

I gcás an dá rothlóir, úsáidtear ranganna mionathraithe rothlóra chun luachanna na n-athróg CSS seo a nuashonrú de réir mar is gá. Mar shampla, .spinner-border-smdéanann an rang an méid seo a leanas:

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

Athróga 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;

Frámaí eochair

Úsáidte chun beochan CSS a chruthú dár rothlóirí. San áireamh i scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}