Bootstrap - Indicatori di caricamento

Benvenuti, aspiranti sviluppatori web! Oggi esploriamo il mondo emozionante degli indicatori di caricamento di Bootstrap. Come il vostro amico insegnante di informatica del quartiere, sono qui per guidarvi in questo viaggio, passo dopo passo. Allora, prendete la vostra bevanda preferita, fatevi comodi e iniziamo a girare attraverso questo tutorial!

Come funziona

Gli indicatori di caricamento in Bootstrap vengono utilizzati per indicare uno stato di caricamento nelle vostre applicazioni web. Sono come quelle piccole circonferenze che si girano quando un sito web sta caricando del contenuto. Questi componenti utili migliorano l'esperienza utente fornendo un feedback visivo che qualcosa sta accadendo dietro le quinte.

Gli indicatori di caricamento di Bootstrap sono costruiti con HTML, CSS e una spruzzata di magia JavaScript. Utilizzano CSS personalizzato per creare l'animazione di rotazione, garantendo un aspetto fluido e coerente su diversi browser e dispositivi.

Indicatore di caricamento a bordo

Iniziamo con l'indicatore di caricamento più basilare: l'indicatore a bordo. Questo è lo stile predefinito degli indicatori di caricamento in Bootstrap.

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

In questo esempio, abbiamo un elemento div con due classi: spinner-border e role="status". La classe spinner-border applica l'animazione di rotazione, mentre role="status" aiuta i lettori di schermo a comprendere che questo è un indicatore di stato.

All'interno del div, abbiamo uno span con la classe visually-hidden. Questo testo non è visibile sullo schermo ma può essere letto dai lettori di schermo, migliorando l'accessibilità per gli utenti con disabilità visive.

Colori

Proprio come un camaleonte che cambia colore, i nostri indicatori di caricamento possono adattarsi a diversi temi! Bootstrap vi permette di personalizzare il colore dei vostri indicatori di caricamento utilizzando le utilità di colore del testo.

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>

Ogni indicatore di caricamento in questo esempio ha una classe aggiuntiva come text-primary, text-secondary, ecc. Queste classi cambiano il colore dell'indicatore per abbinarlo alla tavolozza di colori di Bootstrap.

Indicatore di caricamento crescente

Se gli indicatori di caricamento a bordo non sono il vostro tè preferito, Bootstrap offre un altro gusto: l'indicatore di caricamento crescente. Questo indicatore cresce e si rimpicciolisce invece di ruotare.

<div class="spinner-grow" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>

La struttura è simile all'indicatore di caricamento a bordo, ma utilizziamo la classe spinner-grow invece di spinner-border.

Allineamento

Allineare gli indicatori di caricamento è facilissimo con le utilità di flexbox di Bootstrap. Guardiamo alcuni esempi:

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

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

Nel primo esempio, utilizziamo justify-content-center per centrare l'indicatore di caricamento orizzontalmente. Nel secondo, allineiamo l'indicatore verticalmente con del testo utilizzando align-items-center.

Margine

Avete bisogno di spazio attorno al vostro indicatore di caricamento? Le utilità di margine di Bootstrap vengono in vostro soccorso!

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

La classe m-5 aggiunge un margine di dimensione 5 (che tipicamente è 3rem) attorno a tutti i lati dell'indicatore di caricamento.

Posizionamento

Gli indicatori di caricamento possono essere posizionati all'interno di vari altri elementi. Ecco come inserire un indicatore di caricamento all'interno di un pulsante:

<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">Caricamento...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Caricamento...
</button>

In questi esempi, inseriamo l'indicatore di caricamento all'interno di un pulsante e utilizziamo spinner-border-sm per renderlo più piccolo.

Flex

Le utilità di flexbox possono aiutarvi a creare layout più complessi con gli indicatori di caricamento:

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

Questo centra l'indicatore di caricamento orizzontalmente all'interno del suo contenitore.

Galleggiamento

Per quei momenti in cui avete bisogno che il vostro indicatore di caricamento galleggi, le utilità di galleggiamento di Bootstrap sono qui per aiutarvi:

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

La classe float-end fa galleggiare l'indicatore di caricamento verso destra del suo contenitore.

Allineamento del testo

Le utilità di allineamento del testo possono anche essere utilizzate con gli indicatori di caricamento:

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

Questo centra l'indicatore di caricamento all'interno del suo contenitore utilizzando l'allineamento del testo.

Dimensione

A volte, la dimensione è importante! Potete regolare la dimensione dei vostri indicatori di caricamento utilizzando le classi di dimensione di Bootstrap:

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

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>

Utilizzate spinner-border-sm o spinner-grow-sm per indicatori di caricamento più piccoli. Per dimensioni personalizzate, potete utilizzare stili inline per impostare dimensioni specifiche.

Pulsanti

Ultimo ma non meno importante, vediamo come utilizzare gli indicatori di caricamento all'interno dei pulsanti:

<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">Caricamento...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Caricamento...
</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">Caricamento...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Caricamento...
</button>

Questi esempi mostrano come integrare sia gli indicatori di caricamento a bordo che quelli crescenti nei pulsanti, con e senza testo accompagnatorio.

Ecco fatto, ragazzi! Ora sei un esperto di indicatori di caricamento di Bootstrap. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi componenti nei tuoi progetti. Buon codice e che le tue pagine web sempre si carichino con stile!

Credits: Image by storyset