inrigua
Indica statum oneratum componentis seu paginae cum inrigua Bootstrap, omnino constructa cum HTML, CSS, et non JavaScript.
De
Bootstrap "neptores" adhiberi possunt ad statum oneratum in inceptis tuis demonstrandum. Solum cum HTML et CSS aedificantur, significatione tibi non opus est ullis JavaScript ad eas creandis. Tu tamen aliqua consuetudine opus JavaScript ad visibilitatem suam toggle. Eorum species, alignment, et inspectione facile potest nativus cum mirificis generibus utilitatis nostrae.
Ad usus accessibilitas, quilibet oneratus hic includat role="status"
et nidum <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
interrogatione instrumentorum. Videre
motum sectionem accessibilitatis nostrae documentationis reductam .
Terminus lanificam pensis
Termino inrigua utere ad indicatam levem oneraturam.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Colorum
Terminus lanificam utitur currentColor
pro suo border-color
, significationem colorum cum textu colorum utilitatibus consuescere potes . Potes uti omnibus nostris textibus coloratis utilitatibus in vexillum lanificam.
<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
utilitates non uteris? Quilibet terminus lanificam limitem specificat
transparent
ad minimum latus, ita
.border-{color}
utilitas ut vincat.
Crescens lanificam pensis
Si textrix limbum non tibi placet, transibis ad lanificam crescere. Dum technice non nent, saepe crescit!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Iterum, haec textrix constructa est currentColor
, ut facilem speciem cum textu colorum utilitatibus mutare possis . Hic in caeruleo est, una cum variantibus fultis.
<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>
Gratia diei et noctis
Spinneri in Bootstrap construuntur cum rem
s currentColor
, ac display: inline-flex
. Hoc modo possunt facile resized, colorari, et cito aligned.
Margin
Utere margine utilitas ut .m-5
facile spatio.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Placement
Utere flexbox utilitates , innatare utilitates , vel text alignment utilitas ad locum inrigua prorsus ubi eas in omni situ indiges.
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>
Supernatet
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Text align
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Magnitudo
Adde .spinner-border-sm
et .spinner-grow-sm
facere minorem lanificam quae celeriter in aliis componentibus adhiberi potest.
<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>
Vel, utere consuetudine CSS vel styli inlinei ad mutandum mensuras prout opus est.
<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>
Bullae
Utere inrigua in globulis ad indicandam actionem in actu dispensando vel fiendo. Etiam textum e textrice permuto et textum conjunctionem utendum prout opus est.
<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
Variabilium
$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;
Keyframes
Usus est ad animationes CSS creandas pro nostris inrigua. Included in scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}