Progress Circle

Overview
Specs
Guidelines

Component

A progress circle, also known as a circular progress indicator or spinner, is a graphical element used in user interfaces to indicate that a process is in progress. It typically consists of a circular shape that rotates or fills up gradually to represent the progress of a task or operation. Progress Circles are commonly used in applications during activities such as loading content, downloading files, or processing data, providing users with visual feedback that the system is working on their request.

Progress Circle Anatomy

1: Circular track;
2: Progress indicator;

Progress circle on the overall activity within the group.

Used for:

Loading Screens

Progress Circles are often displayed during content loading processes, such as when a webpage or application is fetching data from a server.

Data Processing

Progress Circles can be used in applications that perform data processing tasks, such as image or video editing software, to show the progress of tasks like rendering or exporting files.

Form Submissions

In web forms, Progress Circles can be used to indicate that a form submission is in progress, providing feedback to users while their request is being processed.

Installation Processes

During software installations or updates, Progress Circles can indicate the progress of the installation process, letting users know how much longer they need to wait.

Don’t use for:

Static Information

Progress Circles are not suitable for displaying static information or content that does not change over time. They are designed specifically to represent dynamic progress or activity.

Continuous Data Visualization

While Progress Circles can indicate the completion percentage of a task, they are not suitable for continuous data visualization, such as displaying real-time data streams or continuous variables.

Detailed Data Representation

Progress Circles are not ideal for representing detailed data or complex information. They are intended to provide a simple visual indication of progress or status, rather than conveying detailed data.

Progress Circles on each individual activity within a group.

Demo

Access the Figma file and inspect the element using Dev Mode.

Figma

Progress Bar

Progress Bars provide users with real-time feedback on the status of ongoing operations …

Toast

Quick, small notifications that appear in the top right corner of the page. These notifications can automatically disappear after five …

Usage

Progress Circles are an effective way of showing progress in terms of ongoing activity or remaining time.

They excel at indicating the status of various activities, including content loading, payment processing, or the remaining time to accept an upsell offer.

There are two main types of Progress Circles: indeterminate, ideal for processes with open-ended progress, and determinate, employed for processes with measurable progress.

It’s crucial to choose the suitable type of Progress Circle based on the specific context and requirements of the task at hand.

Show the collective progress of a group, rather than individual components.

Don’t

Indicate the progress of each individual activity within a group.

Common surfaces

Inside toasts
Entire screen

Behavior

Progress Circles indicate ongoing actions and disappear once they have been completed. Upon successful completion, new content may emerge or a success state may be indicated. Conversely, if the operation fails, an error state is displayed. Various components communicate success and error states depending on the context.

They exhibit distinct behaviors depending on whether they are tracking determinate or indeterminate processes.

Progress Circle Type	Waiting Time	Duration	Behavior
Indeterminate	Unknown	Short	Spins continuously
Determinate	Known	Long	Fills the circle from start to end

Determinate or Indeterminate Progress Circle

Progress Circles can be either determinate or indeterminate, depending on the needs of your application and the capabilities of the technology you’re using.

Employ a determinate Progress Circle, rather than an indeterminate one, when representing known and measurable progress.

Don’t

Don’t use an indeterminate Progress Circle when the progress is known and measurable.

Determinate

Choose determinate Progress Circles to convey completion status accurately, indicating both progress made and remaining work. Opting for determinate circles enhances the user experience, as they offer clear progress updates and reassure users that the task is in progress.

Indeterminate

In situations where the duration of a task is uncertain, an indeterminate Progress Circle becomes necessary. However, unlike determinate circles, indeterminate ones lack the reassurance of ongoing progress. Thus, it’s advisable to reserve their use for short tasks to prevent user concern if the circle spins for too long, potentially signaling an issue.

As data accumulates during task execution, enabling an estimate of remaining time, it is recommended to transition to a determinate Progress Circle. Yet, if there’s minimal time left, allow the animation cycle to conclude before shifting from the loading state. Interrupting an indeterminate progress circle midway through an animation should be avoided.

Best practices

Clockwise for progress, counterclockwise for countdowns

Rotate circles clockwise to indicate progress and counterclockwise for countdowns, providing intuitive visual cues for users.

Placement

The location and placement of the circle convey the scope of the loading process. For instance, a circle positioned at the center of the page means the entire page is loading. inside a sheet, it indicates the loading of the sheet’s content. Similarly, if the circle appears over an image, it means that specific image is being loaded.

Indicate the whole, not each part

Typically, it’s preferable to display progress for the entire group rather than each individual piece of granular activity.

Progress bar versus progress circle?

Progress bars and circles are interchangeable components for indicating progress, but several factors should be considered when deciding between them.

Linear versus continuous

Progress bars, with their linear format, offer a distinct starting and ending point, making them well-suited for tasks with definite completion points. On the other hand, circles, with their continuous shape, are better suited for tasks of indefinite duration, where progress is ongoing and without a defined endpoint.

Space limitations

For limited vertical space, a progress bar is more suitable.