Stili di spinner

Spinners o Loaders si rivelano utili quando l'utente deve attendere durante il caricamento di una pagina Web. Questi spinner aiutano a conservare il traffico di un sito Web durante questo periodo di attesa perché questi fanno sapere all'utente che la pagina verrà caricata presto. Senza questi l'utente potrebbe chiudere la pagina prima che si carichi. Questo blog evidenzia come vengono creati e disegnati i filatori utilizzando Bootstrap 5.

Come creare spinner usando bootstrap 5

Allo scopo di creare uno spinner Assegna semplicemente il .Border spinner Classe per gli elementi in cui si desidera aggiungere il filatore.

Html

Questo è un filatore

Qui stiamo inserendo uno spinner all'interno di un contenitore di div che è ulteriormente avvolto all'interno di un altro contenitore.

Produzione

Un filatore viene anche definito caricatore.

Come fare spinner colorati

Puoi modellare i tuoi filatori utilizzando le classi di utility a colori disponibili in bootstrap 5. Qui abbiamo usato tutte queste lezioni per creare spinner colorati

Html

Il codice sopra generato un totale di 9 spinner ciascuno con un colore diverso.

Produzione

Ecco come puoi creare spinner colorati.

Come creare spinner in crescita

Un altro modo in cui puoi modellare il tuo filatore è dandogli un effetto crescente piuttosto che un effetto rotante. Per assegnare il tuo spinner un effetto crescente usa il .Crow spinner classe.

Html

Come mostrato nello snippet di codice sopra è possibile utilizzare tutte le classi di utilità a colori insieme al .Classe a coltura spinner per creare filatori in crescita.

Produzione

Un effetto crescente è stato aggiunto con successo ai filatori.

Come ridimensionare la dimensione del filatore

Allo scopo di creare un filatore di dimensioni più piccole rispetto alle dimensioni predefinite, utilizzare il .Spinner-Border-Sm classe o se vuoi fare un piccolo filatore in crescita, usa il .Spinner-Crow-Sm.

Html

Lo snippet di codice genererà entrambi i tipi di filatori che girano e crescono, con una dimensione ridotta.

Produzione

L'uscita mostra spinner di dimensioni più piccole rispetto alla dimensione predefinita.

Come aggiungere spinner ai pulsanti

Spesso vogliamo aggiungere spinner ai pulsanti in situazioni in cui l'utente deve attendere il caricamento dell'origine dopo aver fatto clic sul pulsante. Ecco come puoi aggiungere spinner ai pulsanti.

Html

Aspettare…

Nel codice sopra, il primo pulsante aggiunge uno spinner di piccole dimensioni senza alcun testo. Il filatore è stato creato assegnando le classi pertinenti all'elemento. Nel frattempo, il secondo pulsante aggiunge un pulsante di crescita di piccole dimensioni con testo.

Produzione

Seguendo gli approcci discussi sopra puoi creare, stile e aggiungere spinner a vari elementi.

Conclusione

Uno spinner viene creato usando il .Border spinner classe, nel frattempo per modellare lo spinner che puoi utilizzare varie classi di colore di testo disponibili che sono .testo-primario, .text-info, .SUCCESSIONE DEL TESTO, .testo-secondario, .Mieto di testo, .Light di testo, .canale di testo, .testo-buio, E .Warning di testo. Per dare allo spinner un effetto crescente usa il .Crow spinner classe, inoltre, per creare filatori di piccole dimensioni usa il .Spinner-Border-Sm, O .Spinner-Crow-Sm classi. Inoltre, per aggiungere spinner ai pulsanti si estendono all'interno dell'elemento.