Progress Bar

🧭 When to Use a Progress Bar

Use a Progress Bar when:

• Users need to see how much of a process is complete (e.g., uploading, onboarding, loading a dashboard)

• The task takes a noticeable amount of time or consists of multiple steps

• Feedback is needed to reduce perceived wait time or indicate system activity

Avoid using a Progress Bar for ultra-fast tasks or when there's no clear start/end. Use a Loader in those cases.

🎯 Completion Levels

This component includes 10 predefined completion states from 10% to 100% in 10% increments. Each level accurately reflects the fill width, using auto-layout and Figma constraints for consistency.

Completion options:

• 10%

• 20%

• 30%

• 40%

• 50%

• 60%

• 70%

• 80%

• 90%

• 100%

You can toggle between these completion levels via variants or smart layer swapping.

🎨 Display Types

• Default (No Label) – A clean progress bar with no text. Ideal for compact UIs or visual-only feedback.

• With Label – Displays percentage completion (e.g., “70%”) inside or above the bar. Best for forms, onboarding, or reporting dashboards where users benefit from precise feedback.

Each label is dynamically linked to the selected progress value for consistency.

🌈 Color Modes

• Color – Uses a semantic success-style color to indicate positive progress (green by default). Can be overridden for use cases like warnings or loading states.

• Neutral – Uses a muted gray or neutral tone. Ideal when progress is non-critical or visual emphasis isn’t required.

Switch between color modes via Figma variants or token overrides.

🧩 Adjust Gap Variant

The Adjust Gap variant allows designers to manually control the width of the progress fill via a special layer property.

Use this when:

• You want a custom percentage not provided in the 10% steps

• You're visually demonstrating dynamic loading

• You want to fine-tune alignment or fill within fixed-width designs

The fill width is adjusted manually by resizing a named layer called Gap Adjust within the bar component. All corner radius, padding, and background properties remain intact.

♿ Accessibility Considerations

From a design perspective:

• Use color + label together when possible—don’t rely on color alone

• Ensure sufficient contrast between the fill and background (especially in dark mode)

From a code perspective (if implemented):

• Use role="progressbar" and include aria-valuenow, aria-valuemin, and aria-valuemax

• When using labels, make sure screen readers can read the value (e.g., “70 percent complete”)

✅ Best Practices

• Only show a progress bar when completion time is long enough to need feedback

• For multi-step forms, combine with page numbers or step indicators

• Keep fill animations smooth and aligned with system timing tokens

• Always ensure that custom width adjustments preserve visual alignment