Come creare una barra di progresso in HTML e CSS (css progress bar)

La barra di progresso ( css progress bar ) è un elemento importante sul web: serve a mostrare un download, a misurare delle competenze e altro ancora. Per creare una barra di progresso possiamo usare HTML e CSS. Per renderla dinamica ti servirà JavaScript, che non è l’argomento di questo articolo, anche se non escludo di scriverne un seguito con JavaScript. 

In questo articolo impariamo a creare barre di progresso usando HTML e CSS. Una barra di progresso si costruisce con due « div » HTML: il div che avvolge la barra ( wrapper ) e il  div di progresso ( progressbar), come mostrano gli esempi qui sotto.

Creazione di una progress bar css

html progress bar

<h1 class="text-center">Téléchargement</h1>
 <div class="container">
     <p>video.mp4</p>
     <div class="progressbar-wrapper">
      <div title="downloaded" class="progressbar mp4">100%</div>
     </div>

<p>musique.mp3</p>
     <div class="progressbar-wrapper">
      <div title="downloading" class="progressbar mp3">60%</div>
     </div>
</div>

Con il CSS decoriamo i due div tramite l’attributo aria-label. La lunghezza del progresso si definisce con width nelle classi mp4 e mp3.

css progress bar

:root {
  --success: #00b894;
  --progress: #e17055;
}

.progressbar-wrapper {
  background-color: #dfe6e9;
  color: white;
  border-radius: 15px;
  width: 100%;
}

.progressbar {
  background-color: var(--progress);
  color: white;
  padding: 1rem;
  text-align: right;
  font-size: 20px;
  border-radius: 15px;
}

.progressbar[title="downloading"] {
   background-color: var(--progress);
}

.progressbar[title="downloaded"] {
   background-color: var(--success);
}

.mp4 {
  width: 100%;
}

.mp3 {
  width: 60%;
}

Perché usare title?

Title non serve a niente a buona parte delle persone, ma può essere un aiuto per chi ha una disabilità: questi utenti possono aspettarsi, per esempio, un tooltip. In quest’ottica l’attributo title si può usare insieme ad aria-label per una migliore interpretazione da parte di browser e screen reader. Prendiamo due piccioni con una fava usando il CSS per evidenziare quando una barra di progresso è arrivata a termine. 
Chi usa un ingranditore di schermo o ha un problema di vista potrà così conoscere lo stato di avanzamento della barra tramite il tooltip o un assistente vocale.

Risultato della nostra progress bar css

Qui combiniamo le due sezioni precedenti per ottenere la nostra barra di progresso solo con CSS e HTML, trovi il risultato nel mio codepen qui sotto:

See the Pen
Untitled by Damien Flandrin (@dam62500)
on CodePen.dark