Spinners

Rewşa barkirinê ya pêkhateyek an rûpelek bi spinnerên Bootstrap, ku bi tevahî bi HTML, CSS, û bê JavaScript hatî çêkirin, destnîşan bikin.

Li ser vê rûpelê

Ji dor

Bootstrap "spinners" dikarin werin bikar anîn da ku di projeyên we de rewşa barkirinê nîşan bidin. Ew tenê bi HTML û CSS-ê têne çêkirin, tê vê wateyê ku hûn hewce ne JavaScript-ê ne ku wan biafirînin. Lêbelê, hûn ê hewceyê hin JavaScript-a xwerû bikin ku dîtina wan biguhezînin. Xuyabûn, lihevkirin û mezinbûna wan bi dersên meyên karûbar ên ecêb bi hêsanî têne xweş kirin.

Ji bo mebestên gihîştinê, her barkerek li vir tê de role="status"û hêlînek <span class="visually-hidden">Loading...</span>heye.

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Sînor spinner

Ji bo nîşanek barkirinê ya sivik, spinnerên sînor bikar bînin.

html

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

Colors

Sînor spinner ji currentColorbo xwe bikar tîne border-color, tê vê wateyê ku hûn dikarin reng bi karûbarên rengê nivîsê xweş bikin. Hûn dikarin li ser spinner-a standard yek ji karûbarên rengê nivîsara me bikar bînin.

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>

Çima border-colorkarûbar bikar neynin? Her spinner transparentsînorek ji bo kêmanî yek alî sînorek diyar dike, ji ber vê yekê .border-{color}karûbar dê vê yekê derbas bikin.

Spinner mezin dibe

Heke hûn ji spinnerek sînor hez nakin, veguherînin spinner-a mezin. Dema ku ew ji hêla teknîkî ve nezivirîne, ew çend caran mezin dibe!

html

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

Carek din, ev spinner bi ve hatî çêkirin currentColor, ji ber vê yekê hûn dikarin bi hêsanî xuyangê wê bi karûbarên rengê nivîsê biguhezînin . Li vir ew şîn e, digel guhertoyên piştgirî.

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>

Alignment

Spinners di Bootstrap de bi rems, currentColor, û têne çêkirin display: inline-flex. Ev tê vê wateyê ku ew dikarin bi hêsanî mezinahî, ji nû ve werin reng kirin, û bi lez werin rêz kirin.

Margin

Karûbarên marjînal ên wekî .m-5ji bo veqetandina hêsan bikar bînin .

html

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

Cihkirin

Karûbarên flexbox , karûbarên float , an karûbarên hevrêzkirina nivîsê bikar bînin da ku spinneran tam li cîhê ku hûn di her rewşê de hewce ne bi cîh bikin.

Flex

html

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

Barkirin...

html

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

Floats

html

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

Text align

html

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

Mezinayî

Zêde bikin .spinner-border-smû .spinner-grow-smbikin ku spinnerek piçûktir çêbikin ku zû dikare di nav pêkhateyên din de were bikar anîn.

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>

An jî, CSS-ya xwerû an şêwazên hundurîn bikar bînin da ku li gorî hewcedariyê pîvanan biguhezînin.

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>

Buttons

Di nav bişkokan de spinneran bikar bînin da ku destnîşan bikin ku çalakiyek niha tête kirin an pêk tê. Her weha hûn dikarin nivîsê ji hêmana spinner biguhezînin û li gorî hewcedariyê nivîsa bişkojkê bikar bînin.

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

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, spinner naha guhêrbarên CSS-ê yên herêmî li ser .spinner-borderû .spinner-growji bo xwerûkirina rast-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

Guherbarên spinner ên sînor:

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

Mezinbûna guherbarên spinner:

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

Ji bo her du spinneran, çînên guhêrbar ên piçûk têne bikar anîn da ku li gorî hewcedariyê nirxên van guhêrbarên CSS nûve bikin. Mînakî, .spinner-border-smpola jêrîn dike:

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

Guherbarên 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

Ji bo afirandina anîmasyonên CSS-ê ji bo spinnerên me têne bikar anîn. Di nav de scss/_spinners.scss.

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

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