CSS Progress Bar: Fortschrittsbalken mit HTML und CSS bauen

Die Fortschrittsanzeige (css progress bar) ist ein wichtiges Element im Web: Sie zeigt einen Download an, misst einen Kenntnisstand und vieles mehr. Für einen solchen Balken reichen HTML und CSS aus. Damit der Fortschrittsbalken auf echte Ereignisse reagiert, brauchst du JavaScript, und das ist nicht das Thema dieses Artikels, gut möglich, dass ich dazu noch einen zweiten Teil schreibe. 

In diesem Artikel bauen wir Fortschrittsbalken mit HTML und CSS. Ein solcher Balken besteht aus zwei HTML-„div“: dem div, das den Balken umschließt (der Wrapper), und dem eigentlichen Fortschritts-div (die progressbar), wie die folgenden Beispiele zeigen.

Eine CSS Progress Bar bauen

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>

Mit CSS gestalten wir beide div über das Attribut aria-label. Die Länge des Fortschritts wird als width über die Klassen mp4 und mp3 festgelegt.

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

Warum title verwenden?

Für einen großen Teil der Nutzer bringt title nichts, für Menschen mit einer Behinderung kann es dagegen eine Hilfe sein: Sie erwarten zum Beispiel einen Tooltip. In dieser Hinsicht lässt sich das Attribut title zusammen mit aria-label einsetzen, damit Browser und Screenreader es besser verarbeiten. Und wir schlagen zwei Fliegen mit einer Klappe, indem wir per CSS hervorheben, wenn ein Fortschrittsbalken fertig ist. 
Wer eine Bildschirmlupe benutzt oder eine Sehbehinderung hat, erfährt den Stand des Fortschrittsbalkens so über den Tooltip oder über einen Sprachassistenten.

Das Ergebnis unserer CSS Progress Bar

Hier fügen wir die beiden Abschnitte von oben zusammen und erhalten unseren Fortschrittsbalken allein aus CSS und HTML, das Ergebnis findest du unten auf meinem CodePen:

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