Skip to main contentCarbon Design System

Inline loading

The inline loading component provides visual feedback that a user’s action is being processed.

White
Gray 10
Gray 90
Gray 100
Inline loading
Active loading indicator
Loading...
InlineLoading
status

General guidance

Inline loading spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they work to reassure the user that their action is being processed.

Use an inline loading component for any Create, Update, or Delete actions. It can be used in a table, after a primary or secondary button click, or even in a modal.

Format

  • If the inline loading is being used to submit a form, the form fields should get disabled.

  • Descriptive text for the action is optional, but encouraged. If you have limited room or find adding text to be unnecessary you can just run through the animations.

  • The success state of the inline loading component is active for 1.5 seconds before calling a optional function onSuccess. Use the onSuccess function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last indefinitely.

  • If an error occurs, the Inline loading component should be hidden and a error notification should be added or error handling within a form should appear.

  • The inline loading component should never be used to load a page or data.

States

Loading

The loading state indicates that the action is still in progress.

Example of inline loading

Success

The success state indicates that the action completed successfully.

Example of loading success

Error

The error state indicates that the action did not complete successfully.

Example of loading error

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.