inrigua

Indica statum oneratum componentis seu paginae cum inrigua Bootstrap, omnino constructa cum HTML, CSS, et non JavaScript.

In hac pagina

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>.

Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Videre motum sectionem accessibilitatis nostrae documentationis reductam .

Terminus lanificam pensis

Termino inrigua utere ad indicatam levem oneraturam.

html

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

Colorum

Terminus lanificam utitur currentColorpro suo border-color, significationem colorum cum textu colorum utilitatibus consuescere potes . Potes uti omnibus nostris textibus coloratis utilitatibus in vexillum lanificam.

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>

Cur border-colorutilitates non uteris? Quilibet terminus lanificam limitem specificat transparentad 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!

html

<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.

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>

Gratia diei et noctis

Spinneri in Bootstrap construuntur cum rems currentColor, ac display: inline-flex. Hoc modo possunt facile resized, colorari, et cito aligned.

Margin

Utere margine utilitas ut .m-5facile spatio.

html

<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

html

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

Loading...

html

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

Supernatet

html

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

Text align

html

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

Magnitudo

Adde .spinner-border-smet .spinner-grow-smfacere minorem lanificam quae celeriter in aliis componentibus adhiberi potest.

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>

Vel, utere consuetudine CSS vel styli inlinei ad mutandum mensuras prout opus est.

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>

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.

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

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutae CSS variabiles accedunt, inrigua nunc CSS variabilium localium utuntur in .spinner-borderet .spinner-growad real-time customizationem aucta. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

Terminus lanificam pensis variabilis:

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

Crescens textrix variabilium:

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

Utraque enim inrigua, parvae textoriae classes determinativae adhibentur ad valores harum CSS variabilium prout opus est renovare. Classis exempli causa .spinner-border-smfacit haec;

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

Sass variables

$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;
  }
}