Creare una barra di avanzamento con CSS non è un processo complicato. Ecco un esempio di base:
HTML:
```
CSS:
```
.progress-bar {
width: 100%;
height: 30px;
background-color: #f3f3f3;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.progress {
height: 100%;
background-color: #4caf50;
border-radius: 3px;
transition: width .4s ease-in-out;
}
```
In questo esempio, abbiamo una barra di avanzamento di base che occupa l’intera larghezza del container. La barra di avanzamento effettiva viene poi gestita impostando la larghezza della classe .progress.
Nota che abbiamo un transition sul .progress del CSS. Questo fa sì che se la larghezza cambia, ci sia una bella animazione morbida invece di un cambiamento istantaneo. Puoi regolare il tempo di transizione a piacere per renderlo più veloce o più lento.
Naturalmente, questo è solo un esempio di base e puoi personalizzarlo come preferisci. Ad esempio, potresti voler aggiungere una percentuale al centro della barra di avanzamento, cambiare i colori, ecc.
