1. Docs
2. Components
3. Feedback
4. Progress

Progress 1.2.2

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

When to use

• Known progress along a horizontal track (uploads, multi-step completion percentage).
• Indeterminate waiting when duration is unknown but a bar fits the layout better than a spinner.

When not

• Compact circular indicators — use Progress Ring.
• Busy states without a value — consider Spinners.
• Do not put colour / stripe modifiers on the bar alone; they belong on the track (.velin-progress--*).

Basic progress

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

Sizes

Add .velin-progress--sm, --lg, or --xl on the track for thinner or thicker bars.

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

Colors

Put colour modifiers on the track: .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>

Striped & animated

Add .velin-progress--striped and optionally .velin-progress--animated on the track.

<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

Add .velin-progress--indeterminate when the duration is unknown. Animations pause under 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>

Accessibility

• 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 & pitfalls

• Update both style width and aria-valuenow together from your app state.
• There is no <velin-progress> element for linear bars — only CSS (the attribute bridge / ring are separate).
• Prefer Progress Ring in dense toolbars where a bar would dominate the layout.

Related

• Progress Ring
• Spinners
• Stepper