React 组件

UGSpinner 加载

UGSpinner 用于局部加载反馈，适合按钮、列表或页面模块中使用。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGSpinner } from '@ug666/ui-react'

变体预览

不同尺寸的旋转加载图标。

语义色调

使用 tone 统一语义颜色，不需要手写颜色类。

与状态文字组合

视觉图标可以交给外层状态区提供一次清晰的可访问说明。

正在同步任务数据……
正在等待服务重试……

动效边界

组件遵循全局动效 Token，并在减少动效模式下停止持续旋转。

减少动效模式

代码示例

适合搭配按钮或卡片局部占位。

tsx
import { UGSpinner } from '@ug666/ui-react'

export function LoadingState() {
  return <UGSpinner size="lg" tone="primary" label="正在加载内容" />
}

属性

属性类型默认值说明
size'sm' | 'md' | 'lg''md'控制加载图标尺寸。
tone'neutral' | 'primary' | 'success' | 'warning' | 'danger''neutral'使用统一语义 Token 表达加载场景。
labelstring'加载中'用于无障碍描述。
classNamestring—仅用于布局或必要的局部扩展；语义颜色优先使用 tone。