反馈类 · Spin
加载器
加载器组件用于告知用户内容正在加载且需要一段不确定的时长。

代码演示

如何引入

基本用法

尺寸

组件定义了三种尺寸:大、中(默认)、小。

带文字的

通过 tip 属性可设置当 Spin 用作包裹元素时的文字。

自定义指示符

可以通过设置 indicator 属性自定义 Spin 的指示符样式。

延迟显示

通过 delay 设置延迟显示 loading 的效果
组件是否处于 loading 状态由传入的 spinning 值决定,loading 为受控属性

API 参考

属性说明类型默认值
childStyle内部子元素的样式 v>=1.0.0CSSProperties-
delay延迟显示加载效果的时间number(ms)0
indicator加载指示符ReactNode
size组件大小,可选值为 small, middle, largestringmiddle
spinning是否处于加载中的状态booleantrue
style内联样式CSSProperties-
tip当 spin 作为包裹元素时,可以自定义描述文字ReactNode
wrapperClassName包裹元素的类名string

设计变量

FAQ

  • 怎么修改 icon 的颜色?
    可以通过给 .semi-spin-wrapper 类添加 color 属性覆盖原有的颜色(推荐以更高权重覆盖)

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED