Ma spinner

Onetsani momwe gawo kapena tsamba limakwezera ma spinner a Bootstrap, omangidwa kwathunthu ndi HTML, CSS, ndipo palibe JavaScript.

Patsamba ili

Za

Bootstrap "spinners" atha kugwiritsidwa ntchito kuwonetsa momwe mukukweza mumapulojekiti anu. Amamangidwa ndi HTML ndi CSS okha, kutanthauza kuti simufunika JavaScript kuti mupange. Mudzafunika JavaScript yachizolowezi kuti musinthe mawonekedwe awo. Maonekedwe awo, kamvekedwe, ndi kukula kwake zitha kusinthidwa mosavuta ndi makalasi athu odabwitsa.

Zolinga zofikika, chojambulira chilichonse apa chikuphatikiza role="status"ndi nested <span class="visually-hidden">Loading...</span>.

Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Border spinner

Gwiritsani ntchito ma spinner amalire kuti mukhale chizindikiro chotsitsa chopepuka.

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

Mitundu

Border spinner imagwiritsa currentColorntchito zake border-color, kutanthauza kuti mutha kusintha mtunduwo ndi zida zamitundu yamalemba . Mutha kugwiritsa ntchito chilichonse mwazinthu zathu zamtundu wamtundu pa spinner wamba.

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

Bwanji osagwiritsa ntchito border-colorzofunikira? Iliyonse yamalire spinner imatchula transparentmalire a mbali imodzi, kotero .border-{color}zothandizira zitha kupitilira pamenepo.

Kukula kwa spinner

Ngati simukonda spinner ya malire, sinthani ku kukula kwa spinner. Ngakhale sichizungulira mwaukadaulo, imakula mobwerezabwereza!

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

Apanso, spinner iyi imapangidwa ndi currentColor, kotero mutha kusintha mawonekedwe ake mosavuta ndi zida zamitundu yamalemba . Apa ili mu buluu, pamodzi ndi mitundu yothandizidwa.

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

Kuyanjanitsa

Spinners mu Bootstrap amamangidwa ndi rems, currentColor, ndi display: inline-flex. Izi zikutanthauza kuti akhoza kusinthidwanso mosavuta, kusinthidwanso, ndikuyanjanitsidwa mwachangu.

Mphepete mwa nyanja

Gwiritsani ntchito zida zam'mphepete ngati .m-5kuti muzikhala momasuka.

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

Kuyika

Gwiritsani ntchito zida za flexbox , zoyandama , kapena zolumikizira mawu kuti muyike ma spinner pomwe mukuwafuna nthawi iliyonse.

Flex

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

Tikutsegula...

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

Zoyandama

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

Gwirizanitsani mawu

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

Kukula

Onjezani .spinner-border-smndikupanga .spinner-grow-smspinner yaying'ono yomwe ingagwiritsidwe ntchito mwachangu mkati mwa zigawo zina.

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

Kapena, gwiritsani ntchito CSS kapena masitayelo apaintaneti kuti musinthe makulidwe ngati pakufunika.

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

Mabatani

Gwiritsani ntchito ma spinner mkati mwa mabatani kuti muwonetse zomwe zikuchitika kapena zikuchitika. Mutha kusinthanso mawuwo kuchokera pa spinner ndikugwiritsa ntchito batani ngati pakufunika.

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

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

Sass

Zosintha

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

Mafelemu ofunika

Amagwiritsidwa ntchito popanga makanema ojambula a CSS kwa ma spinner athu. Kuphatikizidwa mu scss/_spinners.scss.

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

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