Loading 加载
用于指示内容正在加载或处理中。基于 BrConfigProvider 实现全局主题配置,支持内联/全屏两种加载模式。
基础用法
最简单的加载指示器。
Example
不同变体与尺寸
支持 spin, ring, pulse, dots, bar 五种变体,以及 sm, md, lg, xl 四种尺寸。
30%
60%
Example
内联与文字提示
使用 inline 属性可以使加载器与文字同行显示,使用 text 属性添加提示文字。
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' | 尺寸 |
| color | string | - | 自定义颜色 |
| customSize | string | number | - | 自定义尺寸(宽/高) |
| fullscreen | boolean | false | 是否显示全屏遮罩 |
| inline | boolean | false | 是否内联显示 |
| text | string | - | 加载提示文字 |
| progress | number | - | 进度值(0-100),仅 bar 变体或配合文字使用 |
| disabled | boolean | false | 是否禁用(变淡/不可点击) |
| speed | number | 1 | 动画速度倍率 |
BrLoadingSpinner
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | 'spin' | 'ring' | 'pulse' | 'spin' | 动画变体 |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 尺寸 |
| color | string | - | 颜色 |
| customSize | string | number | - | 自定义尺寸 |
| speed | number | 1 | 速度 |
BrLoadingDots
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 尺寸 |
| color | string | - | 颜色 |
| customSize | string | number | - | 自定义尺寸 |
| speed | number | 1 | 速度 |
BrLoadingBar
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 尺寸 |
| color | string | - | 颜色 |
| progress | number | - | 进度值 |
| speed | number | 1 | 速度 |