Vaendli va swirhendzevutana

Kombisa xiyimo xa ku layicha xa xiphemu kumbe tluka hi swiphepherhele swa Bootstrap, leswi akiweke hi ku helela hi HTML, CSS, naswona ku nga ri na JavaScript.

Eka tluka leri

Hi

Bootstrap “spinners” yinga tirhisiwa ku kombisa xiyimo xa ku layicha eka tiphurojeke ta wena. Ti akiwile ntsena hi HTML na CSS, leswi vulaka leswaku a wu lavi JavaScript leswaku u ti endla. Hambiswiritano, u ta lava JavaScript yin’wana ya ntolovelo leswaku u cinca-cinca ku vonaka ka tona. Ku languteka ka tona, ku ringanana ni ku pima ka tona swi nga endliwa hi ku olova hi titlilasi ta hina to hlamarisa ta switirhisiwa.

Hi swikongomelo swo fikelela, loader yin’wana na yin’wana laha yi katsa role="status"na nested <span class="visually-hidden">Loading...</span>.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Xiphepherhele xa ndzilakano

Tirhisa ti border spinners eka xikombiso xa ku layicha xo olova.

html

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

Mihlovo

Xiphepherhele xa ndzilakano xi tirhisa currentColoreka xona border-color, leswi vulaka leswaku u nga ha cinca muvala hi switirhisiwa swa muvala wa tsalwa . U nga tirhisa xin’wana ni xin’wana xa switirhisiwa swa hina swa mihlovo ya matsalwa eka xiphepherhele xa ntolovelo.

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>

Ha yini u nga tirhisi swilo leswi tirhisiwaka border-color? Xiphepherhele xin’wana ni xin’wana xa ndzilakano xi boxa transparentndzilakano wa tlhelo rin’we, hikwalaho .border-{color}switirhisiwa swi ta tlula sweswo.

Xiphepherhele lexi kulaka

Loko unga fanelangi border spinner, cincela eka grow spinner. Hambileswi yi nga rhendzelekiki hi tlhelo ra vutshila, yi kula hi ku phindha-phindha!

html

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

Nakambe, xiphepherhele lexi xi akiwile hi currentColor, leswaku u kota ku cinca xivumbeko xa xona hi ku olova hi switirhisiwa swa mihlovo ya matsalwa . Laha yi na muhlovo wa wasi, xikan’we na tinxaka leti seketeriwaka.

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>

Ku ringanisa

Ti-spinner eka Bootstrap ti akiwile hi rems, currentColor, na display: inline-flex. Leswi swi vula leswaku ti nga cinca mpimo hi ku olova, ti tlhela ti va ni mihlovo naswona ti hatla ti ringanisiwa.

Makumu

Tirhisa switirhisiwa swa margin ku fana na .m-5ku olova ka ku hambana.

html

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

Ku vekiwa ka swilo

Tirhisa switirhisiwa swa flexbox , switirhisiwa swa float , kumbe switirhisiwa swo ringanisa matsalwa ku veka swiphepherhele kahle laha u swi lavaka kona eka xiyimo xihi na xihi.

Olova

html

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

Ku layicha...

html

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

Swiphaphama

html

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

Ku ringanisa tsalwa

html

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

Sayizi

Engeta .spinner-border-smnaku .spinner-grow-smendla spinner leyintsongo leyinga tirhisiwaka hiku hatlisa endzeni ka swiphemu swin’wana.

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>

Kumbe, tirhisa switayele swa CSS swa ntolovelo kumbe swa le ndzeni ka layini ku cinca tidimenxini tanihilaha swi lavekaka hakona.

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>

Swikomba-nkarhi

Tirhisa swiphepherhele endzeni ka swikomba-nkarhi ku kombisa leswaku xiendlo lexi nga eku endliweni kumbe lexi endlekaka sweswi. U nga ha tlhela u cincana tsalwa ri huma eka elemente ya spinner ivi u tirhisa tsalwa ra buti loko swi laveka.

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

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, va-spinner sweswi va tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya eka .spinner-borderna .spinner-growku antswisiwa ka ku cinca-cinca ka nkarhi wa xiviri. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

Swilo leswi cinca-cincaka swa 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;

Ku kula ka swilo leswi cinca-cincaka swa 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;

Eka swiphepherhele leswi haswimbirhi, titlilasi ta swipikara leswitsongo swi tirhisiwa ku pfuxeta mimpimo ya swilo leswi swi cinca-cincaka swa CSS tanihilaha swi lavekaka hakona. Hi xikombiso, .spinner-border-smtlilasi yi endla leswi landzelaka:

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

Sass swilo leswi cinca-cincaka

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

Tifreimi ta swilotlelo

Yi tirhisiwa ku endla swifaniso swa CSS swa swiphepherhele swa hina. Ku katsiwile eka scss/_spinners.scss.

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

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