Progress Semi-Circle

Progress semi-circles are used to visually represent the completion status of a task or process in a semi-circular format.

Overview

Usage

When to use this component?

Progress semi-circles are used in interfaces to indicate the completion status of ongoing tasks or processes, such as loading sequences, file uploads, or progress toward goals. They offer a quick, visual representation of progress in a compact, visually distinct format that differs from traditional linear progress bars.

How it works

A progress semi-circle component displays a semi-circular indicator that fills as the task progresses. It may include optional elements like labels for additional context. The progress semi-circle can be customized to show different values, label visibility, and sizes, providing flexibility to fit various design needs.

Anatomy

Anatomy Options

• Progress Fill: The arc or filled section that visually indicates the proportion of the task that has been completed. It grows as progress increases.

• Label: A short descriptor positioned next to or inside the progress indicator, giving context about the tracked metric.

• Percentage Label: Located within the center of the circle, this label displays the exact progress as a percentage.

• Background: The unfilled part of the circular path that contrasts with the Progress Fill, representing the remaining portion of the task.

Dos and Don'ts

Dos	Don'ts
Use progress semi-circles to show the completion status of ongoing tasks in a semi-circular format.	Don't use progress semi-circles for tasks that do not involve progressive completion.
Ensure the progress semi-circle is large enough to be easily noticeable.	Don't make the progress semi-circle too small or difficult to see.
Label the progress semi-circle clearly to indicate what it is tracking.	Avoid using ambiguous or unclear labels for progress semi-circles.
Provide clear visual feedback as the progress semi-circle fills.	Don't leave users guessing about the status of the task.
Use consistent styling and spacing across all progress semi-circles in the application.	Don't use inconsistent styles that may confuse users.
Update the progress semi-circle in real-time as the task progresses.	Don't use progress semi-circles if you cannot provide real-time updates.