ProgressBar

Purpose

ProgressBar communicates where a user or system stands in a process that takes measurable time or discrete steps. In a travel booking context this appears in two primary scenarios:

Determinate — the system knows the total duration or step count: "Step 2 of 4 — Passenger details", "Uploading passport scan (78%)", "Payment authorisation (45 s remaining)". The fill moves incrementally as the process advances.

Indeterminate — the system is working but cannot estimate completion: "Searching 2,400 holidays", "Fetching live pricing", "Confirming with supplier". An animated sliding bar communicates activity without implying a known duration.

ProgressBar is a passive indicator — it informs the user, it does not accept input. For stepped form navigation with explicit back/next controls, pair it with a StepIndicator component rather than replacing it.

Usage

Use ProgressBar whenever a process has a measurable duration or step count that the user is waiting on — booking steps, uploads, live search. For a compact, non-labelled loading indicator with no meaningful progress value (e.g. a small inline spinner while a button submits), use Spinner instead.

ProgressBar typically appears at the top of a multi-step checkout form, inside a loading state for search results, or alongside an upload or processing indicator.

Anatomy

Variants

Semantic fill colours

---

Sizes

---

Indeterminate

Use indeterminate when the system is working but cannot report a percentage. The fill element animates from left to right in a continuous 1.5 s loop using animate-[slide_1.5s_ease-in-out_infinite].

When indeterminate is true, the value prop is ignored for display purposes but is still passed to aria-valuenow as undefined, which is correct per the ARIA spec for indeterminate progress.

---

Booking step flow

A common pattern on Kuoni checkout — a determinate bar with a descriptive label that updates as the user moves through steps.

States

Best practices

Props

Accessibility

ARIA role and attributes

The track element renders as role="progressbar" with the following attributes:

<div
  role="progressbar"
  aria-valuenow={indeterminate ? undefined : value}
  aria-valuemin={0}
  aria-valuemax={max}
  aria-label={label}
/>

For indeterminate bars, aria-valuenow is omitted entirely (not set to 0). The ARIA spec states that omitting aria-valuenow on a progressbar signals an indeterminate state to assistive technology.

Live announcements

ProgressBar does not include an aria-live region by default — the progressbar role is sufficient for screen readers to announce state changes. If you need periodic spoken updates (e.g. "75% complete" announced at 25%, 50%, 75%), add an aria-live="polite" region outside the component and update it at the appropriate thresholds in your consuming code.

Example pattern for announced milestones:

const [liveText, setLiveText] = useState('');

// In your progress update handler:
if (value === 50) setLiveText('Search half complete');
if (value === 100) setLiveText('Search complete. 47 holidays found.');

return (
  <>
    <ProgressBar label="Searching holidays" value={value} showValue />
    <span className="sr-only" aria-live="polite">{liveText}</span>
  </>
);

Reduced motion

The indeterminate slide animation respects the prefers-reduced-motion media query. When the user has requested reduced motion, the animation is paused and the fill bar is displayed as a static half-width block. This still communicates 'working' without triggering vestibular discomfort.

Colour contrast

The track and fill colours meet WCAG 2.1 AA for UI components (3:1 ratio against the page background).

Related components

• Spinner — a compact, indeterminate loading indicator without a measurable progress value; use for short waits where a full labelled bar is unnecessary.