in English

Spinners

Tọkasi ipo ikojọpọ ti paati tabi oju-iwe pẹlu awọn alayipo Bootstrap, ti a ṣe patapata pẹlu HTML, CSS, ko si si JavaScript.

Lori iwe yi

Nipa

Bootstrap “spinners” le ṣee lo lati ṣafihan ipo ikojọpọ ninu awọn iṣẹ akanṣe rẹ. Wọn ṣe pẹlu HTML ati CSS nikan, afipamo pe o ko nilo JavaScript eyikeyi lati ṣẹda wọn. Iwọ yoo, sibẹsibẹ, nilo diẹ ninu JavaScript aṣa lati yi hihan wọn pada. Irisi wọn, titete, ati iwọn le jẹ adani ni irọrun pẹlu awọn kilasi iwulo iyalẹnu wa.

Fun awọn idi iraye si, agberu kọọkan nibi pẹlu role="status"ati itẹ-ẹiyẹ kan <span class="visually-hidden">Loading...</span>.

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

alayipo aala

Lo spinners aala fun a lightweight ikojọpọ Atọka.

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

Awọn awọ

Alayipo aala nlo currentColorfun rẹ border-color, afipamo pe o le ṣe akanṣe awọ pẹlu awọn ohun elo awọ ọrọ . O le lo eyikeyi awọn ohun elo awọ ọrọ wa lori alayipo boṣewa.

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

Kilode ti o ko lo border-colorawọn ohun elo? Spinner aala kọọkan ṣalaye transparentaala fun o kere ju ẹgbẹ kan, nitorinaa .border-{color}awọn ohun elo yoo bori iyẹn.

Dagba spinner

Ti o ko ba Fancy alayipo aala, yipada si awọn dagba spinner. Nigba ti o ko ni tekinikali omo ere, o ma leralera dagba!

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

Lẹẹkansi, yi spinner ti wa ni itumọ ti pẹlu currentColor, ki o le ni rọọrun yi awọn oniwe-irisi pẹlu ọrọ awọ igbesi . Nibi o wa ni buluu, pẹlu awọn iyatọ ti o ni atilẹyin.

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

Titete

Spinners ni Bootstrap ti wa ni itumọ ti pẹlu rems, currentColor, ati display: inline-flex. Eyi tumọ si pe wọn le ni irọrun ni iwọn, tun-awọ, ati ni ibamu ni iyara.

Ala

Lo awọn ohun elo ala bi .m-5fun aye to rọrun.

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

Ipo

Lo awọn ohun elo flexbox , awọn ohun elo leefofo , tabi awọn ohun elo titete ọrọ lati gbe awọn alayipo ni deede ibiti o nilo wọn ni eyikeyi ipo.

Flex

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

Nkojọpọ...

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

Fofofo

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

Titọ ọrọ

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

Iwọn

Ṣafikun .spinner-border-smati .spinner-grow-smlati ṣe alayipo kekere ti o le yara ṣee lo laarin awọn paati miiran.

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

Tabi, lo CSS aṣa tabi awọn aza inline lati yi awọn iwọn pada bi o ṣe nilo.

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

Awọn bọtini

Lo awọn alayipo laarin awọn bọtini lati fihan pe iṣẹ kan n ṣiṣẹ lọwọlọwọ tabi ti n waye. O tun le yi ọrọ pada kuro ninu ẹya alayipo ki o lo ọrọ bọtini bi o ṣe nilo.

<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

Awọn oniyipada

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

Awọn fireemu bọtini

Ti a lo fun ṣiṣẹda awọn ohun idanilaraya CSS fun awọn alayipo wa. To wa ninu scss/_spinners.scss.

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

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