Spinners

Asehoy ny toetran'ny famenoana singa na pejy misy spinner Bootstrap, namboarina tanteraka tamin'ny HTML, CSS, ary tsy misy JavaScript.

Amin'ity pejy ity

About

Bootstrap "spinners" dia azo ampiasaina hanehoana ny toetry ny entana ao amin'ny tetikasanao. Namboarina tamin'ny HTML sy CSS ihany izy ireo, midika izany fa tsy mila JavaScript ianao hamoronana azy ireo. Na izany aza, mila JavaScript manokana ianao mba hampihodina ny fahitana azy. Ny bika aman'endriny, ny fampifanarahana ary ny habeny dia azo amboarina mora foana miaraka amin'ireo kilasin'ny fitaovana mahagaga.

Ho an'ny tanjona azo idirana, ny loader tsirairay eto dia role="status"misy <span class="visually-hidden">Loading...</span>.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'io singa io. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

Mpidina sisintany

Ampiasao ny mpanelanelana sisintany ho famantarana fampidinana maivana.

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

loko

Mampiasa azy io ny spinner sisintany currentColor, border-colormidika izany fa azonao atao ny mampifanaraka ny loko amin'ny fampiasana loko lahatsoratra . Azonao atao ny mampiasa ny fampiasa amin'ny loko lahatsoratra amin'ny spinner mahazatra.

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

Nahoana no tsy mampiasa border-colorfitaovana? Ny spinner sisintany tsirairay dia mamaritra transparentsisintany ho an'ny lafiny iray farafaharatsiny, noho izany .border-{color}dia hosoloin'ny fitaovana izany.

Spinner mitombo

Raha tsy tia spinner sisintany ianao dia midira amin'ny spinner grow. Na dia tsy mihodikodina ara-teknika aza izy dia mitombo hatrany!

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

Indray mandeha indray, ity spinner ity dia namboarina miaraka amin'ny currentColor, ka azonao atao ny manova mora foana ny endriny amin'ny fitaovana miloko lahatsoratra . Ity dia miloko manga, miaraka amin'ireo variana tohanana.

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

Fanitsiana

Ny spinners ao amin'ny Bootstrap dia namboarina miaraka amin'ny rems, currentColor, ary display: inline-flex. Midika izany fa azo ovaina mora foana izy ireo, averina loko ary arindra haingana.

sisiny

Mampiasà fampitaovana margin ho .m-5an'ny elanelana mora.

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

fametrahana

Mampiasà fitaovana flexbox , fitaovana mitsingevana , na fitaovana fampifanarahana lahatsoratra mba hametrahana spinner amin'ny toerana ilanao azy amin'ny toe-javatra rehetra.

Flex

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

Loading...

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

mitsingevana

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

Ahitsio ny soratra

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

Size

Ampio .spinner-border-smary .spinner-grow-smmanaova spinner kely kokoa izay azo ampiasaina haingana ao anatin'ny singa hafa.

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

Na, ampiasao CSS manokana na fomba inline hanovana ny refy araka izay ilaina.

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

bokotra

Mampiasà spinners ao anatin'ny bokotra hanondroana hetsika iray eo am-panaovana na mandeha amin'izao fotoana izao. Azonao atao ihany koa ny manova ny lahatsoratra amin'ny singa spinner ary mampiasa bokotra bokotra raha ilaina.

<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

hiovaova

$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

Ampiasaina amin'ny famoronana ny sary mihetsika CSS ho an'ny spinners. Tafiditra ao anatin'ny scss/_spinners.scss.

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

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