Li-spinners

Bontša boemo ba ho kenya karolo kapa leqephe le nang le li-spinners tsa Bootstrap, tse hahiloeng ka ho feletseng ka HTML, CSS, 'me ha ho na JavaScript.

Leqepheng lena

About

Bootstrap "spinners" e ka sebelisoa ho bontša boemo ba ho kenya merero ea hau. Li hahiloe feela ka HTML le CSS, ho bolelang hore ha u hloke JavaScript ho li etsa. Leha ho le joalo, u tla hloka JavaScript e tloaelehileng ho fetola ponahalo ea bona. Ponahalo ea bona, tekano le boholo ba tsona li ka etsoa habonolo ka litlelase tsa rona tse ntle tsa lisebelisoa.

Bakeng sa merero ea phihlello, mojaro o mong le o mong mona o kenyelletsa role="status"le sehlaha sa <span class="visually-hidden">Loading...</span>.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Border spinner

Sebelisa li-spinners tsa moeli bakeng sa pontšo ea boima bo bobebe.

html

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

Mebala

Moeli oa spinner o sebelisa currentColorbakeng sa eona border-color, ho bolelang hore o ka iketsetsa 'mala ka lisebelisoa tsa mebala ea mongolo . U ka sebelisa lisebelisoa life kapa life tsa mebala ea mongolo ho spinner e tloaelehileng.

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>

Ke hobane'ng ha u sa sebelise border-colorlisebelisoa? Moeli o mong le o mong oa spinner o bolela transparentmoeli bakeng sa bonyane lehlakore le le leng, kahoo .border-{color}lisebelisoa li ne li tla feta seo.

Ho hola spinner

Haeba u sa rate spinner ea moeli, fetohela ho grow spinner. Le hoja e sa bilike ka botekgeniki, e ntse e hola khafetsa!

html

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

Hape, spinner ena e hahiloe ka currentColor, kahoo o ka fetola ponahalo ea eona habonolo ka lisebelisoa tsa mebala ea mongolo . Mona ke 'mala o moputsoa, hammoho le mefuta e fapaneng e tšehetsoeng.

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>

Ho tsamaisana

Li-spinner ho Bootstrap li hahiloe ka rems, currentColor, le display: inline-flex. Sena se bolela hore li ka feto-fetoha habonolo, tsa fetoloa mebala, 'me tsa hlophisoa kapele.

Margin

Sebelisa lisebelisoa tsa marang-rang joalo .m-5ka sebaka se bonolo.

html

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

Ho beha

Sebelisa lisebelisoa tsa flexbox , float utilities , kapa lisebelisoa tsa ho hokahanya ha mongolo ho beha li-spinner hantle moo u li hlokang maemong afe kapa afe.

Flex

html

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

E ea kenya...

html

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

E phaphametseng

html

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

Hlophisa mongolo

html

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

Boholo

Eketsa .spinner-border-smle .spinner-grow-smho etsa spinner e nyane e ka sebelisoang kapele ka har'a likarolo tse ling.

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>

Kapa, sebelisa CSS e tloaelehileng kapa li-styles tse ka hare ho marang-rang ho fetola litekanyo kamoo ho hlokahalang.

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>

Likonopo

Sebelisa li-spinner ka har'a likonopo ho bontša hore ketso e ntse e sebetsa kapa e ntse e etsahala. U ka boela ua fetola mongolo ho tsoa ho "spinner element" 'me u sebelise mongolo oa konopo ha ho hlokahala.

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

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, li-spinners li se li sebelisa mefuta e fapaneng ea CSS ea lehae .spinner-borderle .spinner-growbakeng sa ntlafatso ea nako ea nnete. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, le oona.

Mefuta e fapaneng ea Border spinner:

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

Ho eketseha ha mefuta ea 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;

Bakeng sa li-spinner tse peli, lihlopha tse nyenyane tsa ho fetola spinner li sebelisoa ho ntlafatsa boleng ba mefuta ena ea CSS ha ho hlokahala. Ka mohlala, .spinner-border-smsehlopha se etsa se latelang:

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

Mefuta e fapaneng ea 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;

Li-keyframes

E sebelisoa ho theha li-animation tsa CSS bakeng sa li-spinner tsa rona. E kenyelelitsoe ho scss/_spinners.scss.

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

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