Սփիներներ
Նշեք բաղադրիչի կամ էջի բեռնման վիճակը Bootstrap մանողներով, որոնք ամբողջությամբ կառուցված են HTML, CSS և առանց JavaScript-ի:
Մասին
Bootstrap «spinners»-ը կարող է օգտագործվել ձեր նախագծերում բեռնման վիճակը ցույց տալու համար: Դրանք կառուցված են միայն HTML-ով և CSS-ով, այսինքն՝ դրանք ստեղծելու համար JavaScript-ի կարիք չունեք: Այնուամենայնիվ, ձեզ հարկավոր կլինի հատուկ JavaScript՝ դրանց տեսանելիությունը փոխելու համար: Դրանց տեսքը, հավասարեցումը և չափերը կարող են հեշտությամբ հարմարեցվել մեր զարմանալի օգտակար դասերի միջոցով:
Մատչելիության նպատակների համար այստեղ յուրաքանչյուր բեռնիչ ներառում է role="status"
և ներդիր <span class="visually-hidden">Loading...</span>
:
prefers-reduced-motion
լրատվամիջոցների հարցումից: Տեսեք
մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :
Սահմանային մանող
Օգտագործեք եզրագծերը՝ թեթև բեռնման ցուցիչի համար:
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Գույներ
The border spinner-ն օգտագործում currentColor
է իր համար border-color
, ինչը նշանակում է, որ դուք կարող եք հարմարեցնել գույնը տեքստի գունային օգտակար ծրագրերի միջոցով : Դուք կարող եք օգտագործել մեր տեքստի գույնի ցանկացած օգտակար ծրագիր ստանդարտ մանողի վրա:
<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}
կոմունալ ծառայությունները կչեղարկեն դա:
Աճող մանող
Եթե դուք չեք ցանկանում սահմանային մանող, անցեք աճող մանողին: Թեև այն տեխնիկապես չի պտտվում, այն բազմիցս աճում է:
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Եվս մեկ անգամ այս մանողը կառուցված է currentColor
, այնպես որ կարող եք հեշտությամբ փոխել իր տեսքը տեքստի գունավոր կոմունալ ծրագրերի միջոցով : Այստեղ այն կապույտ է, աջակցվող տարբերակների հետ միասին:
<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-ում կառուցված են rem
s- ով currentColor
, և display: inline-flex
. Սա նշանակում է, որ դրանք կարող են հեշտությամբ չափափոխվել, գունավորվել և արագ հավասարեցնել:
Լուսանցք
Օգտագործեք լուսանցքի կոմունալ ծառայություններ , ինչպիսիք .m-5
են հեշտ տարածության համար:
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Տեղադրում
Օգտագործեք flexbox կոմունալ ծառայություններ , float կոմունալ ծառայություններ կամ տեքստի հավասարեցման կոմունալ ծառայություններ՝ ցանկացած իրավիճակում պտտվողները ճիշտ տեղում տեղադրելու համար, որտեղ դրանք ձեզ անհրաժեշտ են:
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Բոցեր
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Տեքստի հավասարեցում
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Չափը
Ավելացրեք .spinner-border-sm
և .spinner-grow-sm
պատրաստեք ավելի փոքր մանող, որը կարող է արագ օգտագործվել այլ բաղադրիչների մեջ:
<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 կամ ներկառուցված ոճեր՝ ըստ անհրաժեշտության չափերը փոխելու համար:
<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>
Կոճակներ
Օգտագործեք պտտվողները կոճակների մեջ՝ ցույց տալու համար, որ գործողությունը ներկայումս մշակվում կամ կատարվում է: Դուք կարող եք նաև փոխել տեքստը պտտվող տարրից և օգտագործել կոճակի տեքստը ըստ անհրաժեշտության:
<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>
Սաս
Փոփոխականներ
$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;
}
}