Como criar uma barra de progresso em HTML e CSS (css progress bar)

A barra de progresso ( css progress bar ) é um elemento importante na web: serve para mostrar uma transferência, medir competências, etc. Para criar uma barra de progresso podemos usar HTML e CSS. Para que esta barra de progresso seja dinâmica vais precisar de JavaScript, que não é o tema deste artigo, embora não esteja posto de parte escrever uma continuação com JavaScript. 

Neste artigo aprendes a criar barras de progresso com HTML e CSS. Uma barra de progresso constrói-se com duas « div » HTML: a div que envolve a barra ( wrapper ) e a  div de progresso ( progressbar), como mostram os exemplos seguintes.

Criação de uma 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>

Com o CSS vamos decorar as duas div através do atributo aria-label. O comprimento do progresso é definido com width nas classes 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%;
}

Porquê usar title?

O title não serve de nada a boa parte das pessoas, mas pode ser uma ajuda para alguém com uma deficiência: esses utilizadores podem contar, por exemplo, com um tooltip. Nesse sentido, o atributo title pode ser usado em conjunto com o aria-label para que navegadores e leitores de ecrã o interpretem melhor. Matamos dois coelhos de uma cajadada ao usar o CSS para destacar quando uma barra de progresso termina. 
Uma pessoa que use uma lupa de ecrã ou que tenha um problema de visão fica assim a saber o estado da barra de progresso através do tooltip ou de um assistente de voz.

Resultado da nossa progress bar css

Aqui vamos combinar as duas secções anteriores para obter a nossa barra de progresso apenas com CSS e HTML, encontras o resultado no meu codepen, mais abaixo:

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