Progress Bar

Overview
Specs
Guidelines
Mobile

Component

A Progress Bar is a graphical UI element that visually represents the completion status of a task, process, or action. It typically consists of a horizontal bar that fills up gradually as the task progresses, accompanied by textual or visual indicators of the completion percentage.

ProgressBar_Anatomy — Progress Bar Anatomy

A – Progress Variation

B – Loading Variation

1 – Title

2 – Progress Bar

3 – Additional information

ProgressBar_DataGrid — Progress Bar inside Data Grid

Used for:

Task progress tracking

Progress Bars are ideal for indicating the completion status of tasks or processes that take a measurable amount of time, such as file downloads;

Real-time feedback

They provide users with real-time feedback on the progress of ongoing operations, helping them understand how much work has been completed;

Complex processes

For multi-step processes or workflows, Progress Bars break down the overall task into smaller, more manageable chunks, helping users track their progress through each stage;

Configurators

Progress Bars help users estimate the remaining time required to complete a task, allowing them to more effectively plan their activities and manage their expectations.

Don’t use for:

Instantaneous processes

Avoid using Progress Bars for tasks or actions that are completed almost instantaneously, as they can create unnecessary visual clutter and may not provide meaningful information to the users;

Indeterminate processes

For tasks with unpredictable durations or indeterminate completion times, such as search operations or background tasks, Progress Bars may not be suitable, but you can use the loading variation in these cases;

Non-sequential processes

Progress Bars are not suitable for tasks that do not follow a linear or sequential order, where progress cannot be quantified in a meaningful way;

Visual distraction

Avoid using Progress Bars if they draw excessive attention away from the main content or disrupt the user’s focus, especially in contexts where users need to concentrate on other tasks or activities.

Demo

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

Open Figma

Last Update

17/07/2024

Added new tab for the mobile version of the component.

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …

Determinate

Without Progress

.withoutProgress {
  progress-bar-background: var(--theme-20);
  label-color: var(--grey-9);
  indicator-color: var(--grey-8);
}

With Progress

.withProgress {
  progress-bar-background: var(--theme-20);
  progress-bar: var(--theme-100);
  label-color: var(--grey-9);
  indicator-color: var(--grey-8);
}

Indeterminate

.Loading {
  progress-bar-background: var(--theme-20);
  progress-bar: var(--theme-100, --rounded);
  label-color: var(--grey-9);
  indicator-color: var(--grey-8);
}

Size

Unique Size

.uniqueSize {
  progressBar-width: 500px;
  progressbar-height: 8px;
  label-title: var(--label-regular);
  label-indicator: var(--label-small);
}

Useful links

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Responsive

Depending on the view, the progress must be responsive to be used in different scenarios, such as uploading a file or image and even in a cell of a data grid. For that , the Progress Bar itself must be able to change sizes according to the usage.