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.

html

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

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>

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!

html

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

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>

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.

html

<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

html

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

Nkojọpọ...

html

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

Fofofo

html

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

Titọ ọrọ

html

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

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>

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

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>

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.

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

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn àyípadà CSS, àwọn apinyi máa ń lo àwọn oniyipada CSS ti agbegbe lori .spinner-borderati .spinner-growfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

Awọn oniyipada alayipo:

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

Awọn oniyipada spinner ti ndagba:

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

Fun awọn alayipo mejeeji, awọn kilasi modifier kekere spinner ni a lo lati ṣe imudojuiwọn awọn iye ti awọn oniyipada CSS wọnyi bi o ṣe nilo. Fun apẹẹrẹ, .spinner-border-smkilasi naa ṣe awọn atẹle:

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

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