CSS progress bar: een voortgangsbalk bouwen met HTML en CSS

De voortgangsbalk (css progress bar) is een belangrijk element op het web: hij kan een download tonen, een vaardigheidsniveau aangeven en nog veel meer. Om er een te bouwen zijn HTML en CSS genoeg. Wil je dat die voortgangsbalk op echte gebeurtenissen reageert, dan heb je JavaScript nodig, en dat is niet het onderwerp van dit artikel, al schrijf ik er misschien nog een vervolg over.

In dit artikel bouwen we voortgangsbalken met HTML en CSS. Een voortgangsbalk bestaat uit twee HTML-‘div’s: de div die de balk omhult (de wrapper) en de div van de voortgang zelf (de progressbar), zoals de voorbeelden hieronder laten zien.

Video afspelenVideo

Een css progress bar bouwen

html progress bar

html

<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>

Met CSS geven we beide divs vorm via het attribuut aria-label. De lengte van de voortgang leggen we als width vast in de klassen mp4 en mp3.

css progress bar

css

: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%;
}

Waarom title gebruiken?

title heeft voor een groot deel van de bezoekers geen nut, maar kan iemand met een beperking helpen: die gebruikers verwachten bijvoorbeeld een tooltip. Op dat punt kun je het attribuut title naast aria-label inzetten, voor betere ondersteuning in browsers en schermlezers. En we slaan twee vliegen in één klap door met CSS een voltooide voortgangsbalk te laten opvallen.
Wie een schermvergroter gebruikt of slechtziend is, komt zo via de tooltip of via een spraakassistent bij de stand van de voortgangsbalk.

Het resultaat van onze css progress bar

Hier combineren we de twee stukken hierboven tot onze voortgangsbalk, gebouwd met alleen CSS en HTML, het resultaat vind je hieronder op mijn CodePen:

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