ionic 加载动作

Ionic 加载动作（Loading）完整实战指南

（Ionic 7+，支持 Angular / React / Vue 都通用）

Ionic 提供了三种最常用的「加载中」组件，按使用频率排序：

组件	用途	是否可自定义内容	推荐指数
ion-loading	全屏蒙层加载（最常用）	可以	★★★★★
ion-spinner	局部小转圈（配合按钮、列表）	仅换样式	★★★★
ion-progress-bar	进度条（上传、下载）	可以	★★★

1. ion-loading（全屏加载，最常用！）

// 在任意页面或服务里注入
import { LoadingController } from '@ionic/angular';

constructor(private loadingCtrl: LoadingController) {}

// 显示加载
async showLoading() {
  const loading = await this.loadingCtrl.create({
    message: '正在加载，请稍候...',   // 文字
    spinner: 'circles',               // 转圈样式（见下表）
    duration: 3000,                   // 自动关闭（毫秒），0=不自动关
    translucent: true,                // 背景半透明
    backdropDismiss: false,           // 点击背景不关闭
    cssClass: 'my-loading',           // 自定义样式类
    // mode: 'ios'                    // 强制 iOS 风格
  });

  await loading.present();

  // 手动关闭（必须成对调用）
  // await loading.dismiss();
}

// 带延迟自动关闭的写法（最常用）
async showAutoLoading() {
  const loading = await this.loadingCtrl.create({
    message: '提交中...',
    duration: 2000
  });
  await loading.present();
}

超实用封装（推荐放 service 里全局调用）

// loading.service.ts
@Injectable({ providedIn: 'root' })
export class LoadingService {
  isLoading = false;

  constructor(public loadingController: LoadingController) {}

  async present(message = '加载中...') {
    this.isLoading = true;
    return await this.loadingController.create({
      message,
      spinner: 'crescent',
    }).then(a => {
      a.present().then(() => {
        if (!this.isLoading) {
          a.dismiss();
        }
      });
    });
  }

  async dismiss() {
    this.isLoading = false;
    return await this.loadingController.dismiss();
  }
}

使用：

await this.loading.present('正在保存...');
// ... 你的异步操作
await this.loading.dismiss();

2. ion-spinner（局部小转圈）

<!-- 配合按钮使用（最常见） -->
<ion-button [disabled]="isSubmitting">
  <ion-spinner name="dots" *ngIf="isSubmitting"></ion-spinner>
  <span *ngIf="!isSubmitting">提交</span>
  <span *ngIf="isSubmitting">提交中...</span>
</ion-button>

<!-- 页面顶部加载条 -->
<ion-spinner name="lines" color="primary"></ion-spinner>

<!-- 所有内置 spinner 样式（直接复制名字） -->
<ion-spinner name="lines"></ion-spinner>          <!-- 推荐 -->
<ion-spinner name="lines-small"></ion-spinner>
<ion-spinner name="bubbles"></ion-spinner>
<ion-spinner name="circles"></ion-spinner>         <!-- 经典 -->
<ion-spinner name="crescent"></ion-spinner>       <!-- 新版推荐 -->
<ion-spinner name="dots"></ion-spinner>

3. ion-progress-bar（进度条）

<!-- 固定进度 -->
<ion-progress-bar value="0.6" color="success"></ion-progress-bar>

<!-- 无限加载条（不确定进度） -->
<ion-progress-bar type="indeterminate"></ion-progress-bar>

<!-- 自定义颜色 + 缓冲 -->
<ion-progress-bar 
  value="0.4" 
  buffer="0.7" 
  color="warning">
</ion-progress-bar>

4. 最佳实践场景总结

你在做什么？	推荐用哪个组件
页面首次加载、请求接口	ion-loading（全屏）
提交表单、登录	ion-loading + 按钮里放 ion-spinner
上拉加载更多	ion-spinner 放在列表底部
文件上传、下载	ion-progress-bar
想酷一点（自定义 HTML）	ion-loading + message 写 HTML

5. 自定义超美 Loading（很多公司都这么玩）

const loading = await this.loadingCtrl.create({
  spinner: null,  // 关键！隐藏默认转圈
  message: `
    <div class="custom-loading">
      <img src="/assets/loading.gif" width="60">
      <div>拼命加载中...</div>
    </div>
  `,
  cssClass: 'custom-loading-class'
});

.custom-loading-class {
  --background: transparent;
  --color: white;
}
.custom-loading {
  text-align: center;
  padding: 20px;
}
.custom-loading img {
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这样写出来的加载效果，在 iOS、Android 上都超级丝滑漂亮！

需要我直接发你一个「全局 Loading 拦截器（配合 HttpClient 自动显示/隐藏）」的完整代码吗？一句话就发～