Skip to content

ProgressBar

Components
3.3.19

This component is one of the components that displays interface's reaction to user actions in the interface. For general rules on such components, see the Loading patterns.

Description

ProgressBar is a component for displaying the loading status of a long process, usually more than 5 seconds. For example, collecting keywords or updating mentions.

As a rule, the progress bar does not block working with the product. The exception is the first launch of the product when the data is partially displayed or not displayed at all.

This component is one of the components that displays the loading and response to user actions in the interface. For general recommendations for such components, see Loading patterns.

Component composition

ProgressBar consists from (surprise!) ProgressBar and ProgressBar.Value.

Sizes

Our ProgressBar has three sizes.

Size Appearance Styles Where to use
L height: 12px, border-radius: var(--rounded-medium) Use in modal windows, on the start screen when launching the product.
M height: 8px, border-radius: var(--rounded-medium) Use inside the product.
S height: 4px, border-radius: var(--rounded-medium) Use in widgets inside reports/products.

Themes and styles

ProgressBar has two themes: dark and invert — for using on light and dark/colored backgrounds, respectively.

Both themes use --progress-bar-value token for color with the gradient pattern to display progress value.

Theme Appearance Styles
Invert background: var(--progress-bar-bg)
Dark background: var(--progress-bar-bg-invert)

Interaction

States

ProgressBar has three states:

  • 0% – the progress bar is colored in gray and has animation.

  • 1-99% – the progress bar is partially filled and the pattern is animated.

  • 100% – the progress bar is static, green.

The progress bar shall not remain in the 100% state – once the process is completed, either a message about the success of the process shall be displayed, or offer the user further actions.

If it is not possible to perform the action immediately, the success status shall be displayed and the user shall be told what to do next.

Display a counter next to the progress bar to show how many of the files were loaded. If there is no data on the exact number of files, then display nothing.

Depending on the usage context, place a counter above or near the progress bar.

The margins between the counter and the progress bar shall be a multiple of 4.

Animation

Progress value is always animated with ease-in.

Usage in UX/UI

When to use ProgressBar

  • If you need to visualize a long process and it doesn't block working with data.
  • When you need to visualize a short process, but it is important to show how much is left until the end of the process. For example, uploading multiple files.
  • If the process is long and blocks working with data, but it is necessary to let the user know when this process will end.

Sometimes you can use an animation without the green bar instead of the progress bar when launching the product. This can be done when you don't know how long the data collection will take. Or make a fake progress bar which will create the illusion of the user approaching the end of the process.

Pinned ProgressBar

When scrolling, the progress bar can be pinned. In this case, pin it above all components, including filters, table headers, etc.

Don't use ProgressBar

  • If you need to show some short action (no more than 5 seconds). It is better to use Spin in this case.
  • To display steps (for example, when filling out a form).

Operation algorithm and time

  • If the download process is too long and we know about it in advance, the progress shall be visualized immediately.
  • If the exact or approximate loading time is not known, wait for 3 seconds and display the fake progress.
  • In cases when loading is very fast, set the minimum time for displaying the progress bar – 3 seconds. This is necessary to avoid "blinking" of the interface.

This component is one of the components that displays interface's reaction to user actions in the interface. For general rules on such components, see the Loading patterns.