Loading 组件使用说明

概述

项目提供两个加载指示器，均无 props、开箱即用，直接渲染即可：

组件	文件	实现
ThreeDotLoading	ThreeDotLoading.tsx	纯 Tailwind animate-bounce 三点弹跳
LoadingSpinner	LoadingSpinner.tsx	motion/react 三点脉冲 + 内联样式

两者职责单一，适用于「数据加载中」占位。

---

ThreeDotLoading —— 三点弹跳

纯 CSS（Tailwind）实现的三点弹跳动画，带 SSR 挂载保护（首帧返回空节点，挂载后再渲染，避免 hydration 闪烁），并附带无障碍标记。

import ThreeDotLoading from "@/common/components/ThreeDotLoading";

{loading ? <ThreeDotLoading /> : <Content />}

特性	说明
依赖	无（纯 Tailwind）
props	无
SSR 保护	挂载前返回空，挂载后渲染
无障碍	role="status" + aria-label="loading"

---

LoadingSpinner —— 三点脉冲

基于 motion/react（Framer Motion）的三点缩放脉冲动画，样式通过组件内 <style> 注入，无外部 CSS 依赖。

import LoadingSpinner from "@/common/components/LoadingSpinner";

<LoadingSpinner />

特性	说明
依赖	motion/react
props	无
动画	scale 1 → 1.5 → 1 循环
样式	组件内 <style> 注入

---

选用建议

• 追求零依赖、体积小、与现有 Tailwind 体系一致 → ThreeDotLoading
• 已引入 motion、想要更顺滑的脉冲动画 → LoadingSpinner