Spinners ƒe ƒuƒoƒo

Fia akpa alo axa aɖe ƒe agbatsɔtsɔ ƒe nɔnɔme kple Bootstrap spinners, si wotu bliboe kple HTML, CSS, eye JavaScript aɖeke mele eme o.

Le axa sia dzi

Ku ɖe

Woateŋu azã bootstrap “spinners” atsɔ afia agbatsɔtsɔ ƒe nɔnɔme le wò dɔwo me. HTML kple CSS koe wotsɔ tu wo, si fia be mèhiã JavaScript aɖeke hafi awɔ wo o. Gake àhiã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu be nàte ŋu atrɔ woƒe nukpɔkpɔ. Woate ŋu atrɔ asi le woƒe dzedzeme, woƒe ɖoɖo, kple woƒe lolome ŋu bɔbɔe kple míaƒe dɔwɔnu ƒe klass wɔnukuwo.

Le mɔnukpɔkpɔwo ta la, agbatsɔla ɖesiaɖe si le afisia la tsɔ role="status"kple nested <span class="visually-hidden">Loading...</span>.

Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

Liƒo ƒe ʋuʋudedi

Zã liƒo ƒe ʋuƒoawo hena agbatsɔtsɔ ƒe dzesi si le bɔbɔe.

html

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

Amadedewo

Liƒo ƒe ʋuʋudedi zãna currentColorna eƒe border-color, si fia be àteŋu atrɔ asi le amadedea ŋu kple nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo . Àte ŋu azã míaƒe nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnu ɖesiaɖe le spinner si wozãna ɖaa la dzi.

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>

Nukata màzã border-colornuzazãwo ƒe dɔwɔnuwo oa? Liƒodziƒomɔ̃ ɖesiaɖe gblɔa transparentliƒo na akpa ɖeka ya teti, eyata .border-{color}dɔwɔnuwo axe mɔ ɖe ema nu.

Spinner si le tsitsim

Ne mèdi be yeazã border spinner o la, ke trɔ ɖe grow spinner la ŋu. Togbɔ be metrɔna le mɔ̃ɖaŋununya nu o hã la, etsina enuenu!

html

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

Le afisia hã la, wotu spinner sia kple currentColor, ale be nàte ŋu atrɔ eƒe dzedzeme bɔbɔe kple nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo . Le afisia la, ele blɔ me, tsɔ kpe ɖe vovototo siwo wodo alɔe ŋu.

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>

Ðoɖowɔwɔ ɖe ɖoɖo nu

Wotsɔa rems, currentColor, kple display: inline-flex. Esia fia be woate ŋu atrɔ asi le woƒe lolome ŋu bɔbɔe, atrɔ asi le woƒe amadede ŋu, eye woate ŋu aɖo wo ɖe ɖoɖo nu kabakaba.

Axadzi

Zã margin utilities abe .m-5na dometsotso bɔbɔe ene.

html

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

Amewo ɖoɖo ɖe teƒe aɖe

Zã flexbox utilities , float utilities , alo text alignment utilities nàtsɔ aɖo spinners ɖe afisi tututu nèhiã wo le le nɔnɔme ɖesiaɖe me.

Do eɖokui ɖe dzi

html

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

Wole ʋuʋum...

html

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

Etsia tsia dzi

html

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

Nuŋɔŋlɔawo nasɔ ɖe ɖoɖo nu

html

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

Lolome

Tsɔe kpe ɖe eŋu .spinner-border-smeye .spinner-grow-smbe nàwɔ ʋuƒo sue aɖe si woate ŋu azã kaba le akpa bubuwo me.

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>

Alo, zã CSS alo atsyã siwo wowɔ ɖe fli me ƒe atsyã tɔxɛwo nàtsɔ atrɔ didimeawo ne ehiã.

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>

Abɔtawo ƒe ƒuƒoƒo

Zã ʋuƒo siwo le abɔtawo me nàtsɔ afia be nuwɔna aɖe le dɔ wɔm alo le edzi yim fifia. Àte ŋu aɖɔli nuŋɔŋlɔa hã le spinner element la me eye nàzã button text ne ehiã.

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 ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, fifia spinners zãa nutoa me CSS tɔtrɔwo le .spinner-borderkple .spinner-growhena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si wodo ɖe ŋgɔ. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

Border spinner ƒe tɔtrɔwo:

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

Spinner ƒe tɔtrɔ siwo le tsitsim:

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

Le ʋuƒo eveawo siaa gome la, wozãa ʋuƒo suewo ƒe tɔtrɔ ƒe hatsotsowo tsɔ trɔa asi le CSS tɔtrɔ siawo ƒe asixɔxɔwo ŋu ne ehiã. Le kpɔɖeŋu me, .spinner-border-smklass la wɔa nu siwo gbɔna:

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

Sass ƒe tɔtrɔwo

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

Keyframewo ƒe nɔnɔmetatawo

Wozãnɛ hena CSS ƒe nɔnɔmetatawo wɔwɔ na míaƒe spinners. Wo dometɔ aɖewoe nye scss/_spinners.scss.

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

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