Di wan dɛn we de spin
Sho di lod stet fɔ wan kɔmpɔnɛnt ɔ pej wit Bootstrap spina dɛn, we dɛn bil ɔlsay wit HTML, CSS, ɛn nɔ JavaSkript.
Bɔt
Yu kin yuz bootstrap “spinners” fɔ sho di lod stet na yu prɔjek dɛn. Na HTML ɛn CSS nɔmɔ dɛn bil dɛn, we min se yu nɔ nid ɛni JavaSkript fɔ mek dɛn. Bɔt yu go nid sɔm kɔstɔm JavaSkript fɔ chenj di we aw dɛn de si dɛn. Dɛn apia, alaynɛshɔn, ɛn sayz kin izi fɔ kɔstɔmayt wit wi wɔndaful yutiliti klas dɛn.
Fɔ aksesibiliti pɔpɔshɔn dɛn, ɛni lod ya inklud role="status"
ɛn wan nest <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
Di pɔsin we de spin bɔda
Yuz di bɔda spina dɛn fɔ wan layt lod indikɛtɔ.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Kɔlɔ dɛn
Di bɔda spina de yuz currentColor
fɔ in border-color
, we min se yu kin kɔstɔmayz di kɔlɔ wit tɛks kɔlɔ yutiliti dɛn . Yu kin yuz ɛni wan pan wi tɛks kɔlɔ yutiliti dɛn na di standad spina.
<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
yutiliti dɛn? Ɛni bɔda spina de sho wan
transparent
bɔda fɔ at le wan say, so
.border-{color}
yutiliti dɛn go ɔvalayz dat.
Spina we de gro
If yu nɔ fansi bɔda spina, swich to di grow spina. Pan ɔl we i nɔ de spin teknik wan, i de gro bɔku bɔku tɛm!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Wans bak, dɛn bil dis spina wit currentColor
, so yu kin chenj di we aw i tan izi wan wit tɛks kɔlɔ yutiliti dɛn . Na ya i de insay blu, wit di sɔpɔt we dɛn de yuz.
<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>
Alignmɛnt fɔ di wan dɛn we de
Spina dɛn na Bootstrap dɛn bil wit rem
s, currentColor
, ɛn display: inline-flex
. Dis min se i izi fɔ chenj dɛn sayz, chenj dɛn kɔlɔ bak, ɛn alaynɛd kwik kwik wan.
Kɔna say
Yuz margin utilities laik .m-5
fɔ izi spays.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Di ples we dɛn fɔ put am
Yuz flexbox utilities , float utilities , ɔ tɛks alaynɛshɔn yutiliti fɔ put spina dɛn jɔs usay yu nid dɛn pan ɛni sityueshɔn.
Bɛn
<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>
Flɔt dɛn
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tekst alaynɛd
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Sayz
Ad .spinner-border-sm
ɛn .spinner-grow-sm
fɔ mek wan smɔl spina we yu kin yuz kwik kwik wan insay ɔda kɔmpɔnɛnt dɛn.
<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>
Ɔ, yuz kɔstɔm CSS ɔ inlayn stayl dɛn fɔ chenj di dimɛnshɔn dɛn as nid de.
<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>
Bɔtin dɛn
Yuz spina dɛn insay bɔtin dɛn fɔ sho se wan akshɔn de prosɛs ɔ de apin naw. Yu kin chenj di tɛks bak kɔmɔt na di spina ɛlimɛnt ɛn yuz bɔtin tɛks as nid de.
<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 we bin de
Di tin dɛn we kin chenj
$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;
Kifrɛm dɛn
Yuz fɔ mek di CSS animashɔn dɛn fɔ wi spina dɛn. Insay de insay scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}