Feedback

Progress bars for completion feedback

Progress bars communicate how far a task has advanced—uploads, installs, or wizard steps. Integrate them into React dashboards and Next.js status pages with clear textual values.

Examples

Striped and animated track treatment.

Progress variants examples

Fill tokens, track scale, shape, and motion flags at a fixed value. Each snippet starts with Variant: listing the row tokens.

Appearance: DEFAULT, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: SECONDARY, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: DESTRUCTIVE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: EMERALD, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: INDIGO, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: PURPLE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: PINK, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: ROSE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: SKY, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: TEAL, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: YELLOW, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: ORANGE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: OUTLINE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GHOST, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GLASS, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-BLUE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-GREEN, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-RED, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-YELLOW, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-PURPLE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-TEAL, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-INDIGO, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-PINK, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: GRADIENT-ORANGE, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: INDIGO, Size: XS, Shape: ROUNDED, Striped: false, Animated: false

Appearance: INDIGO, Size: SM, Shape: ROUNDED, Striped: false, Animated: false

Appearance: INDIGO, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: INDIGO, Size: LG, Shape: ROUNDED, Striped: false, Animated: false

Appearance: INDIGO, Size: XL, Shape: ROUNDED, Striped: false, Animated: false

Appearance: TEAL, Size: MD, Shape: FLAT, Striped: false, Animated: false

Appearance: TEAL, Size: MD, Shape: ROUNDED, Striped: false, Animated: false

Appearance: TEAL, Size: MD, Shape: PILL, Striped: false, Animated: false

Appearance: SKY, Size: MD, Shape: ROUNDED, Striped: true, Animated: true

Appearance: SKY, Size: MD, Shape: ROUNDED, Striped: false, Animated: true

Controlled Value: 0

CSS variable overrides

Progress CSS variables

Override these progress variables on :root, a theme selector, or a component wrapper.

54 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-progress-fg: oklch(20.8% 0.042 265.755);
  --zui-progress-default-fill: oklch(20.8% 0.042 265.755);
  --zui-progress-secondary-fill: oklch(44.6% 0.043 257.281);
  --zui-progress-destructive-fill: oklch(45.5% 0.188 13.697);
  --zui-progress-emerald-fill: oklch(43.2% 0.095 166.913);
  --zui-progress-indigo-fill: oklch(39.8% 0.195 277.366);
  --zui-progress-purple-fill: oklch(43.8% 0.218 303.724);
  --zui-progress-pink-fill: oklch(45.9% 0.187 3.815);
  --zui-progress-rose-fill: oklch(45.5% 0.188 13.697);
  --zui-progress-sky-fill: oklch(44.3% 0.11 240.79);
  --zui-progress-teal-fill: oklch(43.7% 0.078 188.216);
  --zui-progress-yellow-fill: oklch(47.6% 0.114 61.907);
  --zui-progress-orange-fill: oklch(47% 0.157 37.304);
  --zui-progress-outline-fill: oklch(52% 0.105 223.128);
  --zui-progress-ghost-fill: oklch(27.9% 0.041 260.031);
  --zui-progress-glass-fill: oklch(20.8% 0.042 265.755);
  --zui-progress-gradient-blue-fill: linear-gradient(90deg,oklch(62.3% 0.214 259.815),oklch(62.7% 0.265 303.9));
  --zui-progress-gradient-green-fill: linear-gradient(90deg,oklch(72.3% 0.219 149.579),oklch(76.8% 0.233 130.85));
  --zui-progress-gradient-red-fill: linear-gradient(90deg,oklch(63.7% 0.237 25.331),oklch(65.6% 0.241 354.308));
  --zui-progress-gradient-yellow-fill: linear-gradient(90deg,oklch(79.5% 0.184 86.047),oklch(70.5% 0.213 47.604));
  --zui-progress-gradient-purple-fill: linear-gradient(90deg,oklch(62.7% 0.265 303.9),oklch(65.6% 0.241 354.308));
  --zui-progress-gradient-teal-fill: linear-gradient(90deg,oklch(70.4% 0.14 182.503),oklch(71.5% 0.143 215.221));
  --zui-progress-gradient-indigo-fill: linear-gradient(90deg,oklch(58.5% 0.233 277.117),oklch(62.7% 0.265 303.9));
  --zui-progress-gradient-pink-fill: linear-gradient(90deg,oklch(65.6% 0.241 354.308),oklch(64.5% 0.246 16.439));
  --zui-progress-gradient-orange-fill: linear-gradient(90deg,oklch(70.5% 0.213 47.604),oklch(63.7% 0.237 25.331));
  --zui-progress-track-bg: #0000001a;
  --zui-progress-bar-bg-striped: repeating-linear-gradient(135deg,rgba(255,255,255,0.28) 0,rgba(255,255,255,0.28) 10px,transparent 10px,transparent 20px);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-progress-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-progress-default-fill-dark: oklch(98.4% 0.003 247.858);
  /* ...same variables with -dark at the end */
}

What it does

Pair visuals with aria-valuenow updates for assistive technologies.

Avoid fake progress that stalls—users lose trust quickly.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Reset to indeterminate spinners when duration is unknown.

Common use cases

File uploads with byte counts and ETA copy.
Checkout steps with weighted segments.
Background sync jobs in admin consoles.
Onboarding checklists tied to measurable tasks.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Progress component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize progress with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Progress implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.