Spinners

Endike eta loading yon eleman oswa yon paj ak Bootstrap spinners, ki te konstwi antyèman ak HTML, CSS, epi pa gen JavaScript.

Nan paj sa a

Konsènan

Bootstrap "spinners" ka itilize pou montre eta a chaje nan pwojè ou yo. Yo bati sèlman ak HTML ak CSS, sa vle di ou pa bezwen okenn JavaScript pou kreye yo. Sepandan, w ap bezwen kèk JavaScript koutim pou chanje vizibilite yo. Aparans yo, aliyman, ak gwosè yo ka fasilman Customized ak klas itilite etonan nou yo.

Pou rezon aksesibilite, chak loader isit la gen ladann role="status"ak yon imbrike <span class="visually-hidden">Loading...</span>.

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Border spinner

Sèvi ak spinners fwontyè yo pou yon endikatè loading ki lejè.

html

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

Koulè

Spinner fwontyè a itilize currentColorpou li border-color, sa vle di ou ka Customize koulè a ak sèvis piblik koulè tèks . Ou ka itilize nenpòt nan sèvis piblik koulè tèks nou yo sou spinner estanda a.

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>

Poukisa nou pa sèvi ak border-colorsèvis piblik? Chak spinner fwontyè presize yon transparentfwontyè pou omwen yon bò, kidonk .border-{color}sèvis piblik yo ta pase sou sa.

Ap grandi spinner

Si ou pa anpenpan yon spinner fwontyè, chanje nan spinner grandi. Pandan ke li pa teknikman vire, li repete grandi!

html

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

Yon fwa ankò, spinner sa a bati ak currentColor, kidonk ou ka fasilman chanje aparans li ak sèvis piblik koulè tèks . Isit la li se an ble, ansanm ak varyant yo sipòte.

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>

Aliyman

Spinners nan Bootstrap yo bati ak rems, currentColor, ak display: inline-flex. Sa vle di yo ka fasilman redimensionné, chanje koulè, epi byen vit aliyen.

Marge

Sèvi ak sèvis piblik Marge tankou .m-5pou espas fasil.

html

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

Plasman

Sèvi ak sèvis piblik flexbox , sèvis piblik flote , oswa sèvis piblik aliyman tèks pou mete spinners egzakteman kote ou bezwen yo nan nenpòt sitiyasyon.

Flex

html

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

Chaje...

html

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

Flote

html

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

Tèks aliman

html

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

Gwosè

Ajoute .spinner-border-smak .spinner-grow-smfè yon spinner ki pi piti ki ka byen vit itilize nan lòt konpozan.

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>

Oswa, sèvi ak CSS koutim oswa estil inline pou chanje dimansyon yo jan sa nesesè.

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>

Bouton

Sèvi ak spinners nan bouton pou endike yon aksyon aktyèlman ap trete oswa k ap fèt. Ou ka tou chanje tèks la soti nan eleman spinner la epi itilize tèks bouton jan sa nesesè.

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

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a evolye varyab CSS, spinners kounye a itilize varyab CSS lokal yo sou .spinner-borderak .spinner-growpou personnalisation amelyore an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

Varyab sou fwontyè:

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

Ap grandi varyab 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;

Pou tou de vire, yo itilize ti klas modifikatè spinner pou mete ajou valè varyab CSS sa yo jan sa nesesè. Pa egzanp, .spinner-border-smklas la fè bagay sa yo:

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

Sass varyab

$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

Itilize pou kreye animasyon CSS pou spinners nou yo. Enkli nan scss/_spinners.scss.

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

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