Familiekohl fortschrittsbalken

Grundlegende Fortschrittsanzeige

Fortschrittsbalken mit Label

Ein Fortschrittsbalken mit einem Label sieht folgendermaßen aus:

Fortschrittsbalken mit Label

70%

Farbige Fortschrittsbalken

Kontextklassen werden verwendet, um "Bedeutung durch Farben" zu liefern.

40% Komplett (grün)

<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Komplett (grün) </div> </div>

50% Komplett (blau)

<div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Komplett (blau) </div> </div>

60% Komplett (gelb)

<div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Komplett (gelb) </div> </div>

70% Komplett (rot)

<div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Komplett (rot) </div> </div>

Gestreifte Fortschrittsbalken

Fortschrittsbalken können auch gestreift sein:

40% Komplett (grün)

<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Komplett (grün) </div> </div>

50% Komplett (türkis-blau)

<div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Komplett (türkis-blau) </div> </div>

45% Komplett (Rot)

<div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%"> 45% Komplett (Rot) </div> </div>

60% Komplett (orange-gelb)

<div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Komplett (orange-gelb) </div> </div>

Animierte Fortschrittsanzeige

Setzen Sie die Class.active ein , um die Fortschrittsanzeige zu animieren:

40% Komplett (grün)

<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Komplett (grün) </div> </div>

60% Komplett (orange-gelb)

<div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Komplett (orange-gelb) </div> </div>

60% Komplett (blau)

<div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Komplett (blau) </div> </div>

80% Komplett (Rot)

<div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> 80% Komplett (Rot) </div> </div>