Progress Circle

🧭 When to Use a Progress Circle

Use a Progress Circle when:

• You want to represent progress visually in a compact, non-linear way

• You’re working in card layouts, analytics dashboards, or widgets

• You want to give progress visual emphasis without horizontal constraints

Avoid using Progress Circles in long forms or multi-step flows where a linear progression is clearer—use a Progress Bar in those cases.

🎨 Display Modes

• Color – Uses a token-based, semantic success color (e.g. green) to represent completed progress. Ideal when progress is a positive metric like completion or performance.

• Neutral – Uses a muted or grayscale tone to show progress in a subtle, low-emphasis way. Useful for background or passive indicators.

Use variants in Figma to switch between these visual styles.

📏 Sizes

The Progress Circle comes in six predefined sizes to accommodate different use cases and layouts:

• 2XS (xxsm) – Ideal for compact UI or embedded widgets

• XS (xsm) – Slightly larger for small cards or tables

• Small (sm) – Best for inline dashboards or sidebars

• Medium (md) – Default size for general use

• Large (lg) – Used for hero sections or highly visible status indicators

• XL (xl) – Great for overview screens or high-emphasis metric displays

Each size scales the stroke thickness, radius, and label placement proportionally.

🧠 Center Metric Toggle

Each Progress Circle supports an optional metric label centered inside the circle.

When toggled on, this label:

• Dynamically shows the percentage value (e.g. “65%”)

• Can be replaced with any custom metric (e.g. “7/10”, “4h”, or “85pts”)

• Adjusts typography scaling based on the circle’s size

You can toggle this via a layer property in Figma. The text is always centered and vertically aligned using auto layout.

♿ Accessibility Considerations

From a design perspective:

• Ensure sufficient contrast between the filled and unfilled stroke

• Include a label or hint nearby for users relying on text instead of visuals

• Keep center text legible at small sizes

From a code perspective (if implemented):

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

• Provide a descriptive label like “Profile completeness: 70%” for screen readers

• If using a central metric, also expose it via aria-label

✅ Best Practices

• Use center metrics for clarity only when space allows

• Pair the Progress Circle with a legend or label if it’s ambiguous out of context

• Keep animations smooth and consistent across states

• Avoid using too many Progress Circles in one view — they lose impact when overused