余时行做Ionic项目的头一年，我被“加载动画”这种基础得不能再基础的点反复教训过。最典型的一次是订单提交页，用户点击后我用了一个普通的全屏loading遮罩，结果在部分Android WebView上，loading闪了不到0.3秒就消失了，页面看起来像卡死，用户又连点了两下提交，后台直接收到三笔相同订单。事后去查，问题根本不是样式，而是loading弹层的生命周期和触发时机没管好。自那以后我把Ionic加载动画当成一个正经课题来研究——它牵扯到的内容远比“放个转圈图片”多得多。
Ionic的加载动画和纯H5还不一样，它跑在WebView里，却要遵守移动端的原生交互规则：返回键、遮罩、页面切换、触摸穿透，任何一个环节出问题，用户体感都是“这App好卡”或者“这按钮没反应”。所以这篇文章不打算只贴一段调用代码，我会从类型区分、内部逻辑、生产环境时序坑、自建品牌动画、性能与无障碍几个维度，把一个看似普通的加载动画讲透。适合正在做Ionic+Angular/React/Vue项目、想把加载体验做稳的人参考。
1. Ionic里的加载动画有三张脸：先分清再用，才不会互相打架
很多新人在Ionic项目里处理加载状态时，习惯性想到“在页面中间放一个转圈”。但Ionic体系下，加载动画至少应该分成三种场景来看：局部按钮/区域反馈、全局模态阻塞、页面数据占位。选错了形态，功能上不一定崩，体验上一定别扭。
1.1 小范围、高频率的反馈：ion-spinner
如果你只是提交按钮、刷新列表、展开某个小组件时需要一个小菊花，优先用 <ion-spinner>。它是一个自带SVG动画的Web Component，不需要你额外准备gif或图片，也不会因为屏幕分辨率放大而变得模糊。
一个常见的用法是放在按钮里，配合 disabled 状态，避免用户重复点击：
html复制<ion-button [disabled]="submitting" (click)="submit()">
<ion-spinner *ngIf="submitting" name="crescent"></ion-spinner>
<span *ngIf="!submitting">提交订单</span>
<span *ngIf="submitting">提交中…</span>
</ion-button>
这里有两个细节值得注意。一是按钮在切换成spinner后，宽度经常会发生跳动，因为“提交订单”四个字和“提交中…”三个字不一边宽，视觉上整个按钮会抖一下。稳妥做法是给按钮一个固定宽度，或者用 min-width 预留空间。二是不要把 <ion-spinner> 当成全局loading用，它没有遮罩、不拦截点击，如果你在页面中间放一个spinner，用户依然可以点到下面的按钮和列表，这在业务上是很危险的。
1.2 全屏级、带遮罩的“打断式”反馈：LoadingController
当一个操作需要全局等待，比如提交订单、拉取用户初始化信息、生成报告，这时候用户不应该再操作底层页面，Ionic官方给出的答案是 LoadingController，它对应的底层组件是 ion-loading。
很多人没意识到的是，ion-loading 并不是你在模板里写一行 <ion-loading></ion-loading> 就能用的组件，它必须通过Controller创建。原因是它属于Ionic的Overlay体系，跟 ion-alert、ion-toast 一样，需要被动态挂载到App根节点上方，天然自带遮罩层、入场/退场动画以及与系统返回键的交互逻辑。如果你绕过Controller自己用 *ngIf 在页面里渲染一个半透明遮罩，就等于放弃了这些底层能力，后面所有生命周期问题都要自己处理。
1.3 数据占位、进度条与更多选择
第三种形态往往被忽略：页面首屏数据加载。比如进入订单列表，接口要1秒才能返回，这时如果你放一个全屏loading，用户看到的是“白屏-转圈-突然弹出一堆列表”，观感很差。更好的做法是用骨架屏占位，也就是 ion-skeleton-text，让用户在数据回来之前就看到页面的大致结构。Ionic 6+内置了骨架屏组件，配合 animated 属性会有渐变扫光效果。
所以我的建议是：先别急着写代码，判断这次加载是“操作反馈”还是“内容占位”。如果是按钮触发的异步任务，用spinner或loading弹层；如果是页面初始数据加载，用骨架屏；如果是上传下载这种有明确进度概念的，用 ion-progress-bar 反而比转圈更直观。加载动画不是越复杂越好，而是越符合用户对当前任务的预期越好。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. LoadingController的API盘点：从调用姿势到定制边界
如果你决定用 LoadingController 做全局阻塞反馈，那接下来就要把它这套API吃透。光看文档时觉得很简单，无非三行代码，但真正用起来，每个参数都对应一类产品需求。
2.1 标准三段式：create、present、dismiss
基本调用流程是这样的：
typescript复制async submit() {
const loading = await this.loadingCtrl.create({
message: '正在提交订单…',
spinner: 'crescent',
backdropDismiss: false
});
await loading.present();
try {
await this.api.createOrder();
await this.router.navigate(['/order-success']);
} finally {
await l