Progress

Core component

Also known as

Progress bar, Progress indicator

Similar to

Spinner

Available since

@salt-ds/core@1.17.0

Resources

View source code

Support

A progress indicator gives the user an understanding of how long a system operation will take. Use it when the operation will take more than a second to complete. Two components are available to accommodate different layout constraints: CircularProgress and LinearProgress.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the components

When to use

When it’s possible to determine the length of time remaining for a task or operation to complete. This will reassure the user that it is being processed.
To provide users with a visual indication of the status of an operation, or how much of a process is completed.
When the operation will take more than a second to complete, to reassure users that the operation is in progress.

When not to use

When a task or operation will take an indeterminate length of time to complete. Instead, use Spinner.
To indicate the loading of content on navigation. Instead, use Spinner.

Import

To import the CircularProgress and LinearProgress components from the core Salt package, use:

Props

`CircularProgress`

Name	Type	Description	Default

`LinearProgress`

Name	Type	Description	Default

Using the components

When to use

When it’s possible to determine the length of time remaining for a task or operation to complete. This will reassure the user that it is being processed.
To provide users with a visual indication of the status of an operation, or how much of a process is completed.
When the operation will take more than a second to complete, to reassure users that the operation is in progress.

When not to use

When a task or operation will take an indeterminate length of time to complete. Instead, use Spinner.
To indicate the loading of content on navigation. Instead, use Spinner.

Import

To import the CircularProgress and LinearProgress components from the core Salt package, use:

Props

`CircularProgress`

Name	Type	Description	Default

`LinearProgress`

Name	Type	Description	Default

Using the components

When to use

When it’s possible to determine the length of time remaining for a task or operation to complete. This will reassure the user that it is being processed.
To provide users with a visual indication of the status of an operation, or how much of a process is completed.
When the operation will take more than a second to complete, to reassure users that the operation is in progress.

When not to use

When a task or operation will take an indeterminate length of time to complete. Instead, use Spinner.
To indicate the loading of content on navigation. Instead, use Spinner.

Import

To import the CircularProgress and LinearProgress components from the core Salt package, use:

Props

`CircularProgress`

Name	Type	Description	Default

`LinearProgress`

Name	Type	Description	Default

Pill

Radio button