Custom Progress Bar für Wizards

Kürzlich stand ich vor der Herausforderung einen Wizard mit Fortschrittsbalken ohne Komponentenframework zu erstellen. Für den Fortschrittsbalken verwendete ich daher ausschließlich HTML und CSS.

Die Grundlage für den Fortschrittsbalken ist das CSS clip-path Property. Dieses Property wird für Basic Shapes von allen modernen Browsern unterstützt. Mit der polygon() Funktion lassen sich relativ einfach komplexe Formen erstellen. Glücklicherweise gibt es hierfür bereits einen Online Editor, der mir die Gestaltung erleichterte.

Beispiel

Für mein Beispiel verwende ich ein Oktagon als Grundform.

.step {
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

  background: red;

  width: 100px;
  height: 50px;

  line-height: 50px;
  text-align: center;
}

Der Hintergrund kann frei gestaltet werden, ebenso die Höhe und Breite. Die beiden Properties line-height und text-align dienen zur Zentrierung der Beschriftung.

Zusätzlich soll bei einem Fortschrittsbalken innerhalb eines Wizards der aktive Schritt markiert werden. In meinem Beispiel verwende ich für den aktiven Schritt eine andere Hintergrundfarbe:

.step.active {
  background: orange;
}

Das dazu gehörende HTML sieht z.B. so aus:

<div style="display: flex">
  <div class="step">
    Schritt 1
  </div>
  <div class="step active">
    Schritt 2
  </div>
  <div class="step">
    Schritt 3
  </div>
</div>

Dieses Beispiel steht auch auf JSFiddle bereit: Beispiel

Mögliche Erweiterungen

Über die CSS Selektoren :first-child, :last-child und :not lässt sich die Form des ersten bzw. letzten Schritts im Fortschrittsbalken anpassen.