Progress bar UI component for Figma — 50 variants

Component Overview

The Progress component in Emvi UI communicates task advancement and system status using linear and circular indicators. It supports determinate (%) and indeterminate (ongoing) modes, optional labels, and success/error handoffs. Designed for consistency across Figma mockups and Tailwind code, it aligns with tokens for track, fill, label, and motion. Use the component for uploads, installs, background processing, and multi-step flows. Keywords integrated for SEO: progress bar UI, UI progress bar, progress bar UI Figma, circle progress bar UI, bar progression.

Types and Variants

Common variants:
- Linear — Determinate (0–100), Indeterminate (animated bar), Buffer (secondary track indicating preloaded data), Segmented (steps/milestones).
- Circular — Determinate (stroke arc shows %), Indeterminate (spinner), With center label (value or icon).
- Label placement — none / leading / trailing / top / inside bar (compact).
- Validation — success, warning, error (color + icon), paused. All variants are theme-aware (light/dark) and use tokens like progress.track, progress.fill, progress.buffer, progress.label, progress.ring, progress.indeterminate, progress.success, progress.error.

Sizes, Spacing, and Scale

Provide SM/MD/LG scales:
- Linear heights: 4–6–8px (SM/MD/LG) with radius matching input/button radius.
- Circular diameters: 16–24–48px with 2–4px stroke widths.
- Label spacing: 6–8px between bar and label; inside-bar labels use bold text for legibility. Maintain ≥44×44px touch targets for any interactive wrapper (e.g., cancel button) and preserve a consistent vertical rhythm with adjacent form controls and alerts.

States and Behavior

Determinate bars expose value and min/max (0–100 by default). Indeterminate bars loop with subtle motion; respect prefers-reduced-motion. Buffer bars show a secondary track for downloaded/preprocessed data. Use paused for halted tasks and switch to success/error upon completion. Avoid fake jumps; changes should be smooth and truthful. RTL: reverse fill direction for linear bars when appropriate.

Accessibility

Use role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow for determinate progress. Provide an accessible label (visible or aria-label). For indeterminate, omit aria-valuenow and announce context (e.g., “Loading data”). Keep 4.5:1 contrast between fill and track in all themes. Avoid rapid live-region updates; batch announcements (e.g., 10% increments). Ensure focus is on the task, not the bar, unless there are interactive controls (pause/cancel).

Figma & Tailwind Integration

Figma: variants for linear/circular, determinate/indeterminate, label positions, sizes (SM/MD/LG), and outcomes (success/error). Tokens map to styles: progress.track, progress.fill, progress.buffer, progress.label. Autolayout keeps consistent gaps; component properties toggle labels and icons. Tailwind: compose with relative, rounded-full, and utility-driven animations; expose CSS variables (--progress-track, --progress-fill) or design tokens to sync themes. Provide utilities for RTL reversing and prefers-reduced-motion fallbacks.

Best Implementation Practices

- Prefer determinate bars when total work is known; fall back to indeterminate temporarily.
- Keep motion subtle; respect reduced-motion preferences.
- Pair bars with concise labels or ETA when helpful; avoid redundant numbers.
- For large lists, defer rendering with skeletons and only show progress where meaningful.
- Align heights and typography with adjacent inputs/buttons to preserve rhythm.
- On completion, switch to success state briefly or collapse the bar to reduce visual noise.