Source

Spinners

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

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="sr-only">Loading...</span>.

Mpanodina sisintany

Ampiasao ny mpanelanelana sisintany ho famantarana fampidinana maivana.

<div class="spinner-border" role="status">
  <span class="sr-only">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.

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">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!

<div class="spinner-grow" role="status">
  <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">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.

<div class="spinner-border m-5" role="status">
  <span class="sr-only">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="sr-only">Loading...</span>
  </div>
</div>

Loading...

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

mitsingevana

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Ahitsio ny soratra

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">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>