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...
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...
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...
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...
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.
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...
In alternativa, utilizza CSS personalizzati o stili in linea per modificare le dimensioni secondo necessità.
Caricamento in corso...
Caricamento in corso...
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à.