Learning › ui › core › Loading
Edit this page

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

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" />

loading spinner

Dark Theme

loading spinners dark

LoadingPrompt Examples

The following examples show the LoadingPrompt component with different props.

Title Shown

<LoadingPrompt title="Title" />

loading prompt

Message Shown

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

loading prompt message

Determinate and Percent Shown

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

loading promp percent

Cancel Button Shown

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

loading prompt cancel

Status Text Shown

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

loading prompt status

Dark Theme

loading prompts dark

API Reference

  • Loading - An indeterminate spinner component

Last Updated: 02 February, 2022