Loader Alam

Menggunakan @capgo/capacitor-native-loader

@capgo/capacitor-native-loader menampilkan status pemuatan melalui tampilan iOS dan Android asli. Gunakan plugin ini ketika pemuatan perlu tetap halus sementara WebView sibuk, ketika efek fullscreen transparan mahal dalam CSS, atau ketika plugin asli lainnya perlu menampilkan UI pemuatan sebelum JavaScript siap.

Install

npm install @capgo/capacitor-native-loader
npx cap sync

Pemuatan Fullscreen Asli

import { NativeLoader } from '@capgo/capacitor-native-loader';

const { id } = await NativeLoader.show({
  style: 'siri',
  placement: 'fullscreen',
  message: 'Preparing your session',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  scrimColor: 'rgba(3, 7, 18, 0.42)',
  interactionMode: 'block',
});

await initializeAppData();
await NativeLoader.hide({ id });

Pemuatan Edge dengan Perubahan Ukuran WebView

await NativeLoader.setWebViewLayout({
  mode: 'inset',
  insets: { top: 96 },
  animated: true,
});

await NativeLoader.show({
  style: 'wave',
  placement: 'top',
  message: 'Syncing changes',
  interactionMode: 'passThrough',
});

Setelah pemuatan selesai, kembalikan WebView:

await NativeLoader.hideAll({ restoreWebView: true });

Pemuatan Atas Chrome-Style

Gunakan pemuatan loader atas asli seperti browser tanpa meminta CSS untuk animasi selama pekerjaan berat.

const { id } = await NativeLoader.show({
  style: 'chrome',
  placement: 'top',
  colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
  thickness: 4,
  interactionMode: 'passThrough',
  webView: {
    mode: 'resize',
    insets: { top: 12 },
    restoreOnHide: true,
  },
});

await NativeLoader.hide({ id, restoreWebView: true });

Pemuatan Edge Siri V2

Gunakan siri-v2 untuk pemuatan fullscreen asli yang bergerak warna di sekitar tepi layar sementara WebView tetap terlihat.

const { id } = await NativeLoader.show({
  style: 'siri-v2',
  placement: 'fullscreen',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  thickness: 10,
  scrimColor: 'rgba(3, 7, 18, 0.10)',
  interactionMode: 'passThrough',
});

await NativeLoader.hide({ id });

Pemutar Lottie

await NativeLoader.show({
  style: 'lottie',
  placement: 'center',
  asset: {
    type: 'lottie',
    source: 'loader.json',
    loop: true,
  },
});

Aset yang dibundel adalah yang terbaik untuk pemuat awal karena tersedia sebelum permintaan jaringan dan inisialisasi JavaScript.

Panggilan Plugin Natively

Plugin ini mengungkapkan API native publik sehingga plugin lain dapat menampilkan atau menyembunyikan pemuat secara langsung.

Swift:

import CapgoCapacitorNativeLoader

let id = NativeLoader.shared.show(options: [
  "style": "orbit",
  "placement": "fullscreen",
  "message": "Opening secure session"
])

NativeLoader.shared.hide(id: id)

Kotlin:

import app.capgo.nativeloader.NativeLoader

val id = NativeLoader.show(
  activity = activity,
  options = mapOf(
    "style" to "orbit",
    "placement" to "fullscreen",
    "message" to "Loading profile",
  ),
  webView = bridge.webView,
)

NativeLoader.hide(id)

Tautan Berguna

• GitHub: https://github.com/Cap-go/capacitor-native-loader/
• Docs: /docs/plugins/native-loader/

Teruskan dari Menggunakan @capgo/capacitor-native-loader

Jika Anda menggunakan Gunakan @capgo/capacitor-native-loader untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan @capgo/capacitor-native-loader untuk detail implementasi, Panduan Awal untuk pengaturan, Gunakan @capgo/capacitor-native-navigation untuk tata letak chrome dan WebView native, dan Gunakan @capgo/capacitor-transitions untuk gerakan rute WebView.