Loader Alam

Menggunakan @capgo/capacitor-native-loader

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

Install

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

Pemuatan Penuh Native

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 Penuh 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',
});

Saat pemuatan selesai, kembalikan WebView:

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

Pemuatan Top Browser-Style Chrome

Gunakan loader progress native top seperti browser ketika Anda ingin menampilkan bar loading di atas WebView 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 Penuh Siri V2 dengan Edge

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

Loader Lottie

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 Nativ

Plugin ini mengungkapkan API natif 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 Berguna

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

Lanjutkan 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.