向AI描述加载动效时，只说“做个加载动画”往往得不到想要的效果。本文整理7种常见加载动效的类型、关键状态和可直接复制的AI描述示例，帮助你用大白话把需求说清楚。

一、七种加载动效类型

1. Spinner（转圈加载）

• 核心概念：用于处理时间未知的任务，只告诉用户“系统还在处理”。
• 适用场景：不知道还要等多久，不需要显示百分比。
• 关键特征：一直转圈，不显示进度。

2. Progress Bar（进度条）

• 核心概念：用于进度可以计算的任务，让用户知道已经完成了多少。
• 适用场景：任务进度可量化，需要明确告知用户完成比例。
• 关键特征：显示进度百分比，有明确的终点。

3. Circular Progress（圆形进度环）

• 核心概念：展示明确进度，但更适合空间比较小的卡片或指标。
• 适用场景：指标卡、状态卡、紧凑区域。
• 关键特征：圆形进度环从0%走到目标值，中间数字同步变化，完成后停住。

4. Skeleton（骨架屏）

• 核心概念：页面内容还没回来时，先用灰色占位块保留原来的排版，避免页面突然跳动。
• 适用场景：内容未返回，需要保持页面布局稳定。
• 关键特征：用灰色块占住头像、标题和正文的位置；内容出现时直接替换，页面不跳。

5. Shimmer（闪烁光效）

• 核心概念：通常叠加在Skeleton上，用一条移动的亮光告诉用户内容仍在加载。
• 适用场景：强调内容仍在加载中。
• 关键特征：在骨架屏的灰色占位块上，让一条柔和亮光从左往右扫过；占位块本身不要缩放或抖动。

6. Button Loading（按钮加载）

• 核心概念：用户点击提交、生成或保存后，让按钮进入加载状态，同时避免重复点击。
• 适用场景：提交、生成、保存等操作，防止重复提交。
• 关键特征：按钮锁定，文字改为“生成中”，显示小转圈并禁止再次点击；完成后变成对勾和“已完成”。

7. Page Loader（整页加载）

• 核心概念：适合整个页面第一次打开或核心内容没有加载完成时使用。
• 适用场景：首次打开页面或核心内容未完成。
• 关键特征：用加载画面盖住整页；主要内容准备好后再淡出，让页面完整出现。

二、如何向AI描述

• 动效名称：说清是哪一种（Spinner / Skeleton / Page Loader 等）。
• 等待时长：进度能不能算（未知、明确百分比，还是整页等待）。
• 使用场景：发生在哪里（按钮、卡片、内容区，还是整个页面）。

AI描述公式：动效名称 + 等待时长 + 使用场景。