Loading

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

• Spinner - indeterminate spinner component that supports multiple sizes
• 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
• ProgressBar - horizontal progress bar that supports determinate and indeterminate modes
• ProgressSpinner - circular progress indicator that supports determinate and indeterminate modes

Spinner Examples

The following examples show the Spinner component at different sizes.

<Spinner size={SpinnerSize.Small} />
<Spinner size={SpinnerSize.Medium} />
<Spinner size={SpinnerSize.Large} />
<Spinner size={SpinnerSize.XLarge} />

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: 29 November, 2022