Source

Filatori

Indica lo stato di caricamento di un componente o di una pagina con gli spinner Bootstrap, costruiti interamente con HTML, CSS e senza JavaScript.

Di

Gli "spinner" Bootstrap possono essere utilizzati per mostrare lo stato di caricamento nei tuoi progetti. Sono costruiti solo con HTML e CSS, il che significa che non è necessario alcun JavaScript per crearli. Avrai, tuttavia, bisogno di alcuni JavaScript personalizzati per attivare la loro visibilità. Il loro aspetto, allineamento e dimensionamento possono essere facilmente personalizzati con le nostre straordinarie classi di utilità.

Ai fini dell'accessibilità, ogni caricatore qui include role="status"un file <span class="sr-only">Loading...</span>.

Filatore di confine

Usa gli spinner del bordo per un indicatore di caricamento leggero.

Caricamento in corso...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Colori

La selezione del bordo usa currentColorper il suo border-color, il che significa che puoi personalizzare il colore con le utilità del colore del testo . Puoi utilizzare una qualsiasi delle nostre utilità per il colore del testo sullo spinner standard.

Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
<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>

Perché non utilizzare border-colorle utilità? Ogni selezione del bordo specifica un transparentbordo per almeno un lato, quindi .border-{color}i programmi di utilità lo sovrascriverebbero.

Filatore in crescita

Se non ti piace uno spinner di bordo, passa allo spinner di coltivazione. Anche se tecnicamente non gira, cresce ripetutamente!

Caricamento in corso...
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Ancora una volta, questo spinner è costruito con currentColor, quindi puoi facilmente cambiarne l'aspetto con le utilità di colore del testo . Eccolo in blu, insieme alle varianti supportate.

Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
Caricamento in corso...
<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>

Allineamento

Gli spinner in Bootstrap sono costruiti con rems, currentColor, e display: inline-flex. Ciò significa che possono essere facilmente ridimensionati, ricolorati e allineati rapidamente.

Margine

Usa utilità di margine come .m-5per una facile spaziatura.

Caricamento in corso...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

Posizionamento

Usa le utilità flexbox , le utilità float o le utilità di allineamento del testo per posizionare gli spinner esattamente dove ne hai bisogno in qualsiasi situazione.

Flettere

Caricamento in corso...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Caricamento in corso...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Galleggia

Caricamento in corso...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Allineamento del testo

Caricamento in corso...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Dimensione

Aggiungi .spinner-border-sme .spinner-grow-smper creare uno spinner più piccolo che può essere utilizzato rapidamente all'interno di altri componenti.

Caricamento in corso...
Caricamento in corso...
<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>

In alternativa, utilizza CSS personalizzati o stili in linea per modificare le dimensioni secondo necessità.

Caricamento in corso...
Caricamento in corso...
<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>

Bottoni

Utilizzare gli spinner all'interno dei pulsanti per indicare che un'azione è attualmente in elaborazione o in corso. Puoi anche scambiare il testo dall'elemento spinner e utilizzare il testo del pulsante secondo necessità.

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