Pemuat Asli Plugin Capacitor

Menggunakan @capgo/capacitor-loader Nativ

@capgo/capacitor-native-loader renders loading states through native iOS and Android views. Use it when a loader needs to stay smooth while the WebView is busy, when transparent fullscreen effects are expensive in CSS, or when another native plugin needs to show loading UI before JavaScript is ready.

Install

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

Pemuatan Asli Penuh

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 });

Penuh Layar Pembebanan Asli

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

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

Penuh Layar Pembebanan dengan Perubahan Ukuran WebView

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

Ketika pembebanan selesai, kembalikan WebView:

Gunakan loader progress native di atas WebView ketika Anda ingin menampilkan bar pengisian browser seperti di browser tanpa meminta CSS untuk menganimasikan 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 });

Pemuat Edges V2 Siri

Gunakan siri-v2 untuk loader native penuh layar yang bergerak warna di sekitar tepi layar sambil 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 });

Lottie Loader

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

Aset yang dibundel adalah yang terbaik untuk loader 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 loader 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-Tautan Berguna

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

Teruskan dari Menggunakan @capgo/capacitor-native-loader

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