Progress Half-Circle

🧭 When to Use a Half-Circle

Use a Progress Half-Circle when:

• You want a visual indicator that’s more expressive than a bar but more space-efficient than a full circle

• You’re displaying progress horizontally in dense layouts

• You want to give progress indicators a unique visual personality (e.g. gamified dashboards, learning milestones)

Avoid using Half-Circles for complex flows with multiple steps—stick to linear bars or step indicators there.

🎨 Display Modes

• Color – Uses semantic colors (e.g. green for success) to reinforce completion

• Neutral – A grayscale or subtle fill style that de-emphasizes visual weight; great for background or ambient use

Switch between these modes using component variants in Figma.

🧩 Structure & Behavior

The Half-Circle is made up of:

• A background arc representing the total range

• A foreground arc representing the completion

• An optional center label or metric (e.g. percentage, score, level)

The progress fill is calculated using angular motion, and scales automatically to reflect accuracy.

📐 Sizes

Half-Circles follow the same size logic as the Progress Circle, ensuring system consistency:

• 2XS (xxsm)

• XS (xsm)

• Small (sm)

• Medium (md)

• Large (lg)

• XL (xl)

Each size controls the radius, stroke width, and center text scaling.

🔢 Center Metric (Optional)

You can toggle a centered label inside the arc to show:

• A percentage value (“65%”)

• A score or level (“3/5”, “Level 2”, etc.)

• A time or point-based value (“2h 45m”, “85pts”)

Enable or disable this layer using a toggle property in Figma.

♿ Accessibility Considerations

From a design perspective:

• Ensure contrast between background and filled arcs

• Make sure the center label is legible at smaller sizes

• Use alternative text or annotations when space is too tight for full explanation

From a code perspective (if implemented):

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

• Provide a contextual aria-label (e.g. “Task completion: 45%”)

• Don’t animate purely decorative arcs without user preference checks

✅ Best Practices

• Use Half-Circles to highlight performance or progression visually, especially in dashboards or score summaries

• Don’t overcrowd the view with multiple Half-Circles—use sparingly for emphasis

• Stick to one color scheme per view for visual consistency

• Use larger sizes when showing detailed metrics or values in the center