Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

Nā milo

Hōʻike i ke kūlana hoʻouka ʻana o kahi ʻāpana a i ʻole ʻaoʻao me Bootstrap spinners, i kūkulu ʻia me HTML, CSS, a ʻaʻohe JavaScript.

E pili ana

Hiki ke hoʻohana ʻia nā "spinners" Bootstrap e hōʻike i ke kūlana hoʻouka i kāu mau papahana. Kūkulu ʻia lākou me HTML a me CSS wale nō, ʻo ia hoʻi ʻaʻole pono ʻoe i kekahi JavaScript e hana ai. Pono ʻoe i kekahi JavaScript maʻamau e hoʻololi i ko lākou ʻike. Hiki ke maʻalahi ko lākou hiʻohiʻona, alignment, a me ka nui me kā mākou mau papa hana kupanaha.

No nā kumu hiki ke komo, loaʻa i kēlā me kēia mea hoʻoili ma ʻaneʻi role="status"a me kahi pūnana <span class="visually-hidden">Loading...</span>.

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Mea wili palena

E hoʻohana i nā wili palena no kahi hōʻailona hoʻouka māmā.

Ke hoʻouka nei...
html
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Nā kala

Hoʻohana ka mea spinner palena currentColorno kāna border-color, ʻo ia hoʻi, hiki iā ʻoe ke hoʻopilikino i ke kala me nā mea pono kala kikokikona . Hiki iā ʻoe ke hoʻohana i kekahi o kā mākou mau pono kala kala ma ka spinner maʻamau.

Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
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>
No ke aha e hoʻohana ʻole ai i border-colornā pono hana? Hoʻokaʻawale kēlā me kēia mea wili palena i kahi transparentpalena no ka liʻiliʻi o hoʻokahi ʻaoʻao, no laila .border-{color}e hoʻopau nā ponohana i kēlā.

Mea wili ulu

Inā ʻaʻole ʻoe makemake i ka wili palena, e hoʻololi i ka wili ulu. ʻOiai ʻaʻole ia e milo pono, e ulu mau ana!

Ke hoʻouka nei...
html
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Eia hou, ua kūkulu ʻia kēia spinner me currentColor, no laila hiki iā ʻoe ke hoʻololi maʻalahi i kona helehelena me nā pono kala kala kikokikona . Eia ma ka uliuli, me nā ʻano like ʻole i kākoʻo ʻia.

Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
Ke hoʻouka nei...
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>

Hoʻopololei

Kūkulu ʻia nā spinners ma Bootstrap me rems, currentColor, a me display: inline-flex. ʻO ia ke ʻano hiki ke hoʻololi hou ʻia, hoʻihoʻi hou ʻia, a hoʻonohonoho koke ʻia.

ʻāpana

E hoʻohana i nā pono hana margin e like me .m-5ka maʻalahi o ka maʻalahi.

Ke hoʻouka nei...
html
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Hoʻokomo

E hoʻohana i nā pono hana flexbox , nā pono lana , a i ʻole nā ​​pono hoʻoponopono kikokikona e hoʻonoho i nā spinners ma kahi āu e pono ai iā lākou i kēlā me kēia kūlana.

Flex

Ke hoʻouka nei...
html
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
Ke hoʻouka nei...
html
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Nā lana

Ke hoʻouka nei...
html
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Kaulike kikokikona

Ke hoʻouka nei...
html
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Nui

Hoʻohui .spinner-border-sma .spinner-grow-smhana i kahi wili liʻiliʻi hiki ke hoʻohana koke ʻia i loko o nā mea ʻē aʻe.

Ke hoʻouka nei...
Ke hoʻouka nei...
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>

A i ʻole, e hoʻohana i ka CSS maʻamau a i ʻole kaila inline e hoʻololi i nā ana e like me ka mea e pono ai.

Ke hoʻouka nei...
Ke hoʻouka nei...
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>

Nā pihi

E hoʻohana i nā spinners i loko o nā pihi e hōʻike i kahi hana i kēia manawa ke hana a hana ʻia paha. Hiki iā ʻoe ke hoʻololi i ke kikokikona mai loko mai o ka mea spinner a hoʻohana i ke pihi kikokikona e like me ka mea e pono ai.

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

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻololi ʻana o ka CSS variables a Bootstrap, hoʻohana nā spinners i kēia manawa i nā ʻano CSS kūloko .spinner-bordera .spinner-growno ka hoʻomaikaʻi ʻana i ka manawa maoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau Sass.

Nā mea hoʻololi wili palena:

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

Ke ulu nei nā ʻano ʻano spinner:

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

No nā wili ʻelua, hoʻohana ʻia nā papa hoʻololi spinner liʻiliʻi e hōʻano hou i nā waiwai o kēia mau ʻano CSS e like me ka mea e pono ai. No ka laʻana, hana ka .spinner-border-smpapa i kēia:

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

Nā hoʻololi Sass

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

Nā pahu kī

Hoʻohana ʻia no ka hana ʻana i nā animation CSS no kā mākou spinners. Hoʻokomo ʻia i loko o scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}