1. Erste Schritte
2. Komponenten
3. Fortschritt

Fortschritt 1.2.0

Lineare Fortschrittsbalken (.velin-progress) with sizes, contextual colors, striped and animated variants, plus an indeterminate mode. Pure CSS — no web component. English: Fortschritt

Wann verwenden

• Bekannter Fortschritt entlang einer horizontalen Spur (Uploads, Abschlussquote mehrstufiger Abläufe).
• Indeterminate Warten, wenn die Dauer unbekannt ist, ein Balken aber besser ins Layout passt als ein Spinner.

Wann nicht

• Compact circular indicators — use Fortschrittsring.
• Busy states without a value — consider Ladeanzeigen.
• Setze Farb-/Streifen-Modifier nicht nur auf den Balken; sie gehören auf die Spur (.velin-progress--*).

Basis-Fortschritt

<div class="velin-progress">
  <div class="velin-progress__bar" role="progressbar"
       style="width: 25%" aria-valuenow="25"
       aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Größen

Füge .velin-progress--sm, --lg, oder --xl auf der Spur für dünnere oder dickere Balken.

<div class="velin-progress velin-progress--sm">…</div>
<div class="velin-progress velin-progress--lg">…</div>

Farben

Setze Farb-Modifier auf die Spur: .velin-progress--success, --warning, --danger, --info.

<div class="velin-progress velin-progress--success">
  <div class="velin-progress__bar" role="progressbar" style="width:30%"
       aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Gestreift & animiert

Füge .velin-progress--striped und optional .velin-progress--animated auf der Spur.

<div class="velin-progress velin-progress--striped">
  <div class="velin-progress__bar" …>Striped</div>
</div>

<div class="velin-progress velin-progress--striped velin-progress--animated">
  <div class="velin-progress__bar" …>Animated</div>
</div>

Indeterminate

Füge .velin-progress--indeterminate wenn die Dauer unbekannt ist. Animationen pausieren unter prefers-reduced-motion: reduce.

<div class="velin-progress velin-progress--indeterminate">
  <div class="velin-progress__bar" role="progressbar"
       aria-valuemin="0" aria-valuemax="100" aria-label="Loading"></div>
</div>

Barrierefreiheit

• Put role="progressbar" on .velin-progress__bar with aria-valuemin / aria-valuemax.
• For determinate bars set aria-valuenow (and keep the visual width in sync).
• Indeterminate bars omit aria-valuenow; provide aria-label (or labelled text) describing the busy state.
• Optional overlay label: .velin-progress__label.

API (CSS)

Best Practices & Fallstricke

• Aktualisiere sowohl style Breite als auch aria-valuenow gemeinsam aus deinem App-State.
• There is no <velin-progress> element for linear bars — only CSS (the attribute bridge / ring are separate).
• Bevorzuge den Fortschrittsring in dichten Toolbars, in denen ein Balken das Layout dominieren würde.

Verwandt

• Fortschrittsring
• Ladeanzeigen
• Schrittanzeige