Loading

The Loading category in the @itwin/core-react package includes components for displaying determinate and indeterminate status indicators, such as spinners and progress bars. These include:

• LoadingBar - determinate loading bar with optional percentage text
• LoadingPrompt - component to display during loading that optionally shows percentage, status text and a cancel button
• LoadingSpinner - loading spinner component that optionally shows a text message

LoadingSpinner Examples

The following examples show the LoadingSpinner component at different sizes.

<LoadingSpinner size={SpinnerSize.Small} message="This is a Small LoadingSpinner" />
<LoadingSpinner size={SpinnerSize.Medium} message="This is a Medium LoadingSpinner" />
<LoadingSpinner size={SpinnerSize.Large} message="This is a Large LoadingSpinner" />
<LoadingSpinner size={SpinnerSize.XLarge} message="This is a XLarge LoadingSpinner" />

Dark Theme

LoadingPrompt Examples

The following examples show the LoadingPrompt component with different props.

Title Shown

<LoadingPrompt title="Title" />

Message Shown

<LoadingPrompt title="Title" message="This is the message" />

Determinate and Percent Shown

<LoadingPrompt title="Title" message="This is the message" isDeterminate={true} percent={50} />

Cancel Button Shown

<LoadingPrompt title="Title" message="This is the message" isDeterminate={true} percent={50} showCancel={true} />

Status Text Shown

<LoadingPrompt title="Title" message="This is the message" isDeterminate={true} showStatus={true} percent={50} status="Updating..." />

Dark Theme

API Reference

• Loading - An indeterminate spinner component

Last Updated: 02 February, 2022