如何使用

• 通常情况下，加载器组件适用短时加载场景(建议时长不大于4s)
• 当组件内部文字(如按钮)需要更新时，我们应在对应区域显示加载器作为状态提示，以避免出现文字突然变化

解构

1. 加载符号 ：带有加载动画的标志符;
2. 文本(可选) 用以在加载时向用户传达含义;

组件 Demo

常规

带文字

自定义符号

控件加载

以 Logo 作为加载符号

• 加载动画不应过于复杂，建议有一定规律，且节奏适当；
• Logo 的大部分颜色应尽量使用无彩色（黑、白、灰），我们推荐使用颜色： #2E3238，不透明度设置在 5%-30% 之间；
• 减少 Logo 中的不必要元素，勿呈现太多内容以增加用户的阅读和认知负担；
• 也可以基于以上设计原则使用产品的 Slogan 或吉祥物来做加载动画效果。 以某产品为例：

原 Logo 效果

加载场景下的 Logo 动态效果

组件区分

Spin 加载器

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

快速表示加载状态，暂不考虑加载的快慢对用户造成的焦虑等问题

开发成本最低，因此大部分加载场景下会默认使用 Spin

Skeleton 骨架屏

在需要等待加载内容的位置提供的占位组件

如果加载时间超过 400ms，用户就会有预期外的等待感，可使用骨架屏来缓解用户的焦虑情绪。

在页面内容趋于稳定，且不会有大幅度的布局上的改动时更为适用。

Progress 进度条

用于展示用户操作的当前进度和状态，一般在操作耗时较长时使用。

当前进度和状态的提示能够较为有效地缓解用户的焦虑情绪。

更常用于局部加载的环境中。

常见问题

Q1. Spin 和 Skeleton 可以同时使用么？