Skip to content

Loading 加载

用于指示内容正在加载或处理中。基于 BrConfigProvider 实现全局主题配置,支持内联/全屏两种加载模式。

基础用法

最简单的加载指示器。

Example

不同变体与尺寸

支持 spin, ring, pulse, dots, bar 五种变体,以及 sm, md, lg, xl 四种尺寸。

30%
60%
Example

内联与文字提示

使用 inline 属性可以使加载器与文字同行显示,使用 text 属性添加提示文字。

Data is loading...
Loading data...
Uploading-45%
Example

全屏遮罩

使用 fullscreen 属性可以覆盖全屏,常用于页面跳转或重要操作等待。

Example

主题定制

通过 BrConfigProvider 全局配置或 CSS 变量局部覆盖。

70%
Example

自定义颜色与大小

直接通过 Props 传递颜色和尺寸。

Fast!
Example

API

BrLoading

属性类型默认值说明
variant'spin' | 'ring' | 'pulse' | 'dots' | 'bar''spin'加载动画变体
size'sm' | 'md' | 'lg' | 'xl''md'尺寸
colorstring-自定义颜色
customSizestring | number-自定义尺寸(宽/高)
fullscreenbooleanfalse是否显示全屏遮罩
inlinebooleanfalse是否内联显示
textstring-加载提示文字
progressnumber-进度值(0-100),仅 bar 变体或配合文字使用
disabledbooleanfalse是否禁用(变淡/不可点击)
speednumber1动画速度倍率

BrLoadingSpinner

属性类型默认值说明
variant'spin' | 'ring' | 'pulse''spin'动画变体
size'sm' | 'md' | 'lg' | 'xl''md'尺寸
colorstring-颜色
customSizestring | number-自定义尺寸
speednumber1速度

BrLoadingDots

属性类型默认值说明
size'sm' | 'md' | 'lg' | 'xl''md'尺寸
colorstring-颜色
customSizestring | number-自定义尺寸
speednumber1速度

BrLoadingBar

属性类型默认值说明
size'sm' | 'md' | 'lg' | 'xl''md'尺寸
colorstring-颜色
progressnumber-进度值
speednumber1速度