Loading

Indicates that content is being loaded or processed. Based on BrConfigProvider for global theme configuration, supporting both inline and fullscreen loading modes.

Basic Usage

The simplest loading indicator.

Example

Variants and Sizes

Supports five variants: spin, ring, pulse, dots, bar, and four sizes: sm, md, lg, xl.

30%

60%

Example

Inline and Text

Use the inline prop to display the loader inline with text, and use the text prop to add a loading message.

Data is loading...

Loading data...

Uploading-45%

Example

Fullscreen

Use the fullscreen prop to cover the entire screen, commonly used for page transitions or blocking operations.

Example

Theming

Customize globally via BrConfigProvider or locally via CSS variables.

70%

Example

Custom Color and Size

Pass color and size directly via props.

Fast!

Example

API

BrLoading

Prop	Type	Default	Description
variant	'spin' | 'ring' | 'pulse' | 'dots' | 'bar'	'spin'	Loading indicator variant
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Size
color	string	-	Custom color
customSize	string | number	-	Custom size (width/height)
fullscreen	boolean	false	Whether to show fullscreen mask
inline	boolean	false	Whether to display inline
text	string	-	Loading text
progress	number	-	Progress value (0-100), only for bar variant or with text
disabled	boolean	false	Whether disabled (dimmed/unclickable)
speed	number	1	Animation speed multiplier

BrLoadingSpinner

Prop	Type	Default	Description
variant	'spin' | 'ring' | 'pulse'	'spin'	Animation variant
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Size
color	string	-	Color
customSize	string | number	-	Custom size
speed	number	1	Speed

BrLoadingDots

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Size
color	string	-	Color
customSize	string | number	-	Custom size
speed	number	1	Speed

BrLoadingBar

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Size
color	string	-	Color
progress	number	-	Progress value
speed	number	1	Speed