Спиннерлар
Bootstrap әйләндергечләре белән компонентның яки битнең йөкләү халәтен күрсәтегез, тулысынча HTML, CSS белән төзелгән, һәм JavaScript юк.
Турында
Ботстрап “әйләндергечләр” сезнең проектларда йөкләү халәтен күрсәтү өчен кулланылырга мөмкин. Алар HTML һәм CSS белән генә төзелгән, димәк, аларны ясау өчен сезгә JavaScript кирәк түгел. Сезгә күренүчәнлеген үзгәртү өчен сезгә махсус JavaScript кирәк булачак. Аларның тышкы кыяфәте, тигезләнеше, зурлыгы безнең гаҗәеп файдалы класслар белән җиңел көйләнә ала.
Мөмкинлек максатларында, мондагы һәр йөкләүче үз эченә ала role="status"
һәм ояланган <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
медиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз
.
Чик әйләндергеч
Aиңел йөкләү индикаторы өчен чик әйләндергечләрен кулланыгыз.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Төсләр
Чик әйләндергеч currentColor
аның өчен куллана border-color
, димәк, сез төсне текст ярдәмендә куллана аласыз . Сез безнең теләсә нинди текст төсләрен стандарт әйләндергечтә куллана аласыз.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
коммуналь хезмәтләрне кулланмаска? Eachәрбер чик әйләндергеч
transparent
ким дигәндә бер ягы өчен чикне билгели, шуңа күрә
.border-{color}
коммуналь хезмәтләр моны кире кагарлар.
Spсүче әйләндергеч
Әгәр дә сез чик әйләндергечне яратмыйсыз икән, үсүче әйләндергечкә күчә. Техник яктан әйләнмәсә дә, ул берничә тапкыр үсә!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Тагын бер тапкыр, бу әйләндергеч белән төзелгән , шуңа күрә сез аның тышкы кыяфәтен текст төсеcurrentColor
ярдәмендә җиңел үзгәртә аласыз . Монда ул зәңгәр төстә, ярдәмче вариантлар белән бергә.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Тигезләү
Bootstrap-та әйләндергечләр rem
s currentColor
, һәм display: inline-flex
. Димәк, алар җиңел үзгәртелергә, төсләргә һәм тиз тигезләнергә мөмкин.
Маргин
Easyиңел аралар өчен маржа ярдәмен кулланыгыз ..m-5
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Урнаштыру
Флексбокс инженерлыкларын , йөзү программаларын яки текстны тигезләү программаларын кулланыгыз.
Флекс
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Йөзүләр
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Текстны тигезләү
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Размер
Башка компонентлар эчендә тиз кулланыла ала торган кечерәк әйләндергеч өстәү .spinner-border-sm
һәм ясау..spinner-grow-sm
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Яисә, кирәк булганда үлчәмнәрне үзгәртү өчен, махсус CSS яки сызык стильләрен кулланыгыз.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">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="sr-only">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="sr-only">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>