Սփիներներ

Նշեք բաղադրիչի կամ էջի բեռնման վիճակը Bootstrap մանողներով, որոնք ամբողջությամբ կառուցված են HTML, CSS և առանց JavaScript-ի:

Այս էջում

Մասին

Bootstrap «spinners»-ը կարող է օգտագործվել ձեր նախագծերում բեռնման վիճակը ցույց տալու համար: Դրանք կառուցված են միայն HTML-ով և CSS-ով, այսինքն՝ դրանք ստեղծելու համար JavaScript-ի կարիք չունեք: Այնուամենայնիվ, ձեզ հարկավոր կլինի հատուկ JavaScript՝ դրանց տեսանելիությունը փոխելու համար: Դրանց տեսքը, հավասարեցումը և չափերը կարող են հեշտությամբ հարմարեցվել մեր զարմանալի օգտակար դասերի միջոցով:

Մատչելիության նպատակների համար այստեղ յուրաքանչյուր բեռնիչ ներառում է role="status"և ներդիր <span class="visually-hidden">Loading...</span>:

Այս բաղադրիչի անիմացիոն էֆեկտը կախված է prefers-reduced-motionլրատվամիջոցների հարցումից: Տեսեք մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :

Սահմանային մանող

Օգտագործեք եզրագծերը՝ թեթև բեռնման ցուցիչի համար:

html

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

Գույներ

The border spinner-ն օգտագործում currentColorէ իր համար border-color, ինչը նշանակում է, որ դուք կարող եք հարմարեցնել գույնը տեքստի գունային օգտակար ծրագրերի միջոցով : Դուք կարող եք օգտագործել մեր տեքստի գույնի ցանկացած օգտակար ծրագիր ստանդարտ մանողի վրա:

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>

Ինչու չօգտվել border-colorկոմունալ ծառայություններից: Յուրաքանչյուր եզրագծային պտույտ սահմանում է transparentեզրագիծ առնվազն մեկ կողմի համար, այնպես որ .border-{color}կոմունալ ծառայությունները կչեղարկեն դա:

Աճող մանող

Եթե դուք չեք ցանկանում սահմանային մանող, անցեք աճող մանողին: Թեև այն տեխնիկապես չի պտտվում, այն բազմիցս աճում է:

html

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

Եվս մեկ անգամ այս մանողը կառուցված է currentColor, այնպես որ կարող եք հեշտությամբ փոխել իր տեսքը տեքստի գունավոր կոմունալ ծրագրերի միջոցով : Այստեղ այն կապույտ է, աջակցվող տարբերակների հետ միասին:

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>

Հավասարեցում

Սփիներները Bootstrap-ում կառուցված են rems- ով currentColor, և display: inline-flex. Սա նշանակում է, որ դրանք կարող են հեշտությամբ չափափոխվել, գունավորվել և արագ հավասարեցնել:

Լուսանցք

Օգտագործեք լուսանցքի կոմունալ ծառայություններ , ինչպիսիք .m-5են հեշտ տարածության համար:

html

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

Տեղադրում

Օգտագործեք flexbox կոմունալ ծառայություններ , float կոմունալ ծառայություններ կամ տեքստի հավասարեցման կոմունալ ծառայություններ՝ ցանկացած իրավիճակում պտտվողները ճիշտ տեղում տեղադրելու համար, որտեղ դրանք ձեզ անհրաժեշտ են:

Flex

html

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

Բեռնվում է...

html

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

Բոցեր

html

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

Տեքստի հավասարեցում

html

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

Չափը

Ավելացրեք .spinner-border-smև .spinner-grow-smպատրաստեք ավելի փոքր մանող, որը կարող է արագ օգտագործվել այլ բաղադրիչների մեջ:

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>

Կամ օգտագործեք հատուկ CSS կամ ներկառուցված ոճեր՝ ըստ անհրաժեշտության չափերը փոխելու համար:

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>

Կոճակներ

Օգտագործեք պտտվողները կոճակների մեջ՝ ցույց տալու համար, որ գործողությունը ներկայումս մշակվում կամ կատարվում է: Դուք կարող եք նաև փոխել տեքստը պտտվող տարրից և օգտագործել կոճակի տեքստը ըստ անհրաժեշտության:

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

Փոփոխականներ

Ավելացված է v5.2.0-ում

Որպես Bootstrap-ի զարգացող CSS փոփոխականների մոտեցման մաս, մանողներն այժմ օգտագործում են տեղական CSS փոփոխականներ .spinner-borderիրական .spinner-growժամանակում ընդլայնված հարմարեցման համար: CSS փոփոխականների արժեքները սահմանվում են Sass-ի միջոցով, ուստի Sass-ի հարմարեցումը դեռևս աջակցվում է:

Սահմանային պտտվող փոփոխականներ.

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

Աճող մանող փոփոխականներ.

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

Երկու մանողների համար էլ օգտագործվում են փոքր մանող մոդիֆիկատորների դասեր՝ անհրաժեշտության դեպքում այս CSS փոփոխականների արժեքները թարմացնելու համար: Օրինակ, .spinner-border-smդասարանն անում է հետևյալը.

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

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;

Հիմնական շրջանակներ

Օգտագործվում է մեր մանողների համար CSS անիմացիաներ ստեղծելու համար: Ներառված է scss/_spinners.scss.

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

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