A. Indicator

The circular indicator indicates a loading process by spinning clockwise and switching to a success or error state upon completion of the loading process.

B. Label (Optional)

An optional label can be used to provide more information about the loading process. In error states, it is mandatory to communicate the error message to the user.

Anatomy of checkout indicator

A checkout indicator can be used on a full screen or in a modal.

A full-screen checkout indicator is recommended for user tasks that require blocking other user actions, bringing the user to another page after the request is processed.

A checkout indicator in a modal is used for same-screen loading when a major user task requires blocking other actions, returning the user to the same page once the request is processed.

Full-screen checkout indicator (left) and checkout indicator in a modal (right)

A checkout indicator has three value states: processing, success, and error/fail. When a user request is triggered, the checkout indicator enters the processing state, where the indicator continues to rotate. Once the request is completed, it changes to either the success state or error/fail state based on the outcome of the request.

Checkout indicator processing state (left), success state (middle,) and error/fail state (right)