Progress Circle
A Progress Circle is a graphical representation that provides feedback about the duration and progression of a process.
- 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.
- 1: Circular track;
- 2: Progress indicator;
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.
Demo
Access the Figma file and inspect the element using Dev Mode.
Related
Progress Bar
Toast
Colors
The Progress Circle provides a spectrum of colors suited to its context. Colors such as info, warning, error, and success are applied when the progress circle is integrated into toast notifications.
Theme
.progress-circle-theme{
stroke-width: 6px;
stroke: var(--Theme-Theme-20, #CCDAFF);
stroke-fill: var(--Theme-Theme-100, #CCDAFF);
}Info
.progress-circle-info{
stroke-width: 6px;
stroke: var(--Info-Info-20, #C0E2FB);
stroke-fill: var(--Info-Info-100, #004B98);
}Warning
.progress-circle-warning{
stroke-width: 6px;
stroke: var(--Warning-Warning-20, #FEEDD4);
stroke-fill: var(--Warning-Warning-100, #CB5800);
}Error
.progress-circle-error{
stroke-width: 6px;
stroke: var(--Error-Error-20, #F9CFD4);
stroke-fill: var(--Error-Error-100, #C00E19);
}Success
.progress-circle-success{
stroke-width: 6px;
stroke: var(--Success-Success-20, #B2ECD3);
stroke-fill: var(--Success-Success-100, #0E5E3F);
}Measurements
Small
.small{
width: var(--Sizing-regular, 24px);
height: var(--Sizing-regular, 24px);
flex-shrink: 0;
}Regular
.regular{
width: var(--Sizing-medium, 32px);
height: var(--Sizing-medium, 32px);
flex-shrink: 0;
}Large
.large{
width: var(--Sizing-large, 48px);
height: var(--Sizing-large, 48px);
flex-shrink: 0;
}X-Large
.x-lage{
width: var(--Sizing-x-large, 64px);
height: var(--Sizing-x-large, 64px);
flex-shrink: 0;
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
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.
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 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.
Case Studies
Building a new Seamless User Experience
Discover the exciting features
