Cómo crear una barra de progreso en HTML y CSS (css progress bar)

La barra de progreso ( css progress bar ) es un elemento importante en la web: sirve para mostrar una descarga, medir competencias, etc. Para crear una barra de progreso podemos usar HTML y CSS. Para que esta barra de progreso sea dinámica necesitarás JavaScript, que no es el tema de este artículo, aunque no descarto escribir una segunda parte con JavaScript. 

Este artículo te enseña a crear barras de progreso usando HTML y CSS. Una barra de progreso se construye con dos « div » HTML: el div que envuelve la barra ( wrapper ) y el  div de progreso ( progressbar), como muestran los ejemplos siguientes.

Creación de 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 el CSS vamos a decorar los dos div a través del atributo aria-label. La longitud del progreso se define con width en las clases mp4 y 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%;
}

¿Por qué usar title?

Title no le sirve de nada a buena parte de la población, pero puede ser una ayuda para una persona con discapacidad: esos usuarios pueden esperar, por ejemplo, un tooltip. En ese sentido, el atributo title se puede usar junto con aria-label para que navegadores y lectores de pantalla lo interpreten mejor. Matamos dos pájaros de un tiro al usar el CSS para destacar cuándo una barra de progreso ha terminado. 
Una persona que use una lupa de pantalla o que tenga un problema de visión podrá así conocer el estado de la barra de progreso a través del tooltip o de un asistente de voz.

Resultado de nuestra progress bar css

Aquí vamos a combinar las dos secciones anteriores para obtener nuestra barra de progreso solo con CSS y HTML, encontrarás el resultado en mi codepen, más abajo:

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