in English

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'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

Mpanodina sisintany

Ampiasao ny mpanelanelana sisintany ho famantarana fampidinana maivana.

html

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

loko

Ny spinner sisintany dia mampiasa currentColorazy border-color, midika izany fa azonao atao ny mampifanaraka ny loko amin'ny fampiasana loko lahatsoratra . Azonao atao ny mampiasa ny iray amin'ireo fitaovana miloko lahatsoratra amin'ny spinner mahazatra.

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>

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 tianao ny spinner sisintany dia midira amin'ny spinner mitombo. Na dia tsy mihodikodina ara-teknika aza izy dia mitombo hatrany!

html

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

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>

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à fitaovana margin ho .m-5an'ny elanelana mora.

html

<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

html

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

Loading...

html

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

mitsingevana

html

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

Ahitsio ny soratra

html

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

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>

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

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>

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.

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

hiovaova

Nampiana v5.2.0

Amin'ny maha-ampahany amin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny spinners izao dia mampiasa ny fari-piainan'ny CSS eo an-toerana .spinner-bordersy .spinner-growamin'ny fanatsarana ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

Variable spinner sisintany:

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

Variable spinner mitombo:

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

Ho an'ny spinners roa, ny kilasy modifier spinner kely dia ampiasaina hanavaozana ny soatoavin'ireo fari-piadidiana CSS ireo raha ilaina. Ohatra, .spinner-border-smmanao izao manaraka izao ny kilasy:

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

Sass variables

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