Loading 加载组件

包含按钮加载、文字加载及消息气泡加载等多种场景的动画组件。

@pt/react-common 提供了一系列轻量级的加载组件，用于满足不同 UI 场景下的等待反馈。

ButtonLoading

主要用于按钮内部或小型占位场景，表现为三个闪烁的圆点。

import { ButtonLoading } from "@pt/react-common/components";

<div className="flex gap-4 items-center">
<button className="px-4 py-2 bg-blue-500 text-white rounded flex gap-2 items-center">
  <span>提交中</span>
  <ButtonLoading color="#fff" />
</button>
<ButtonLoading color="#3b82f6" />
</div>

MessageLoading

专为消息气泡设计的加载动画，模拟气泡缩放和内部点动效果。

import { MessageLoading } from "@pt/react-common/components";

<MessageLoading color="#3b82f6" fontSize={24} />

TextLoading

用于文字末尾的三个动态点，常用于 "加载中..." 文本。

AI 正在处理您的请求

import { TextLoading } from "@pt/react-common/components";

<div className="text-xl font-medium">
AI 正在处理您的请求<TextLoading />
</div>

属性说明

ButtonLoading

属性	类型	默认值	说明
`color`	`string`	`#fff`	圆点的颜色
`className`	`string`	-	自定义类名

MessageLoading

属性	类型	默认值	说明
`color`	`string`	`#86909c`	加载图标颜色
`fontSize`	`number`	`24`	图标基础大小

TextLoading

属性	类型	默认值	说明
`className`	`string`	-	自定义类名

互动演练场

试试直接编辑下方代码，预览区会实时更新：

加载编辑器中…

Loading 加载组件

On this page