Loader Asli

Menggunakan @capgo/capacitor-native-loader

@capgo/capacitor-native-loader Mengrender status loading melalui tampilan native iOS dan Android. Gunakan hal ini ketika loader perlu tetap halus sementara 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

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

Loader Edge dengan Pengaturan Ukuran WebView

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

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

Ketika loading selesai, kembalikan WebView:

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

Loader Top Progress Seperti Chrome

Gunakan loader top progress native ketika Anda ingin bar loading seperti browser 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 });

Loader Edge Siri V2

Gunakan siri-v2 untuk loader fullscreen 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,
  },
});

Sumber daya yang dibundel adalah yang terbaik untuk loader startup karena tersedia sebelum permintaan jaringan dan inisialisasi JavaScript.

Panggilan Plugin Asli

Plugin tersebut 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-asli/
• Dokumentasi: /docs/plugins/loader-asli/

Teruskan dari Menggunakan @capgo/capacitor-loader-asli

Jika Anda menggunakan Menggunakan @capgo/capacitor-loader-asli untuk merencanakan perilaku media dan antarmuka native, hubungkannya @capgo/capacitor-native-loader untuk detail implementasi, Mula-Mula untuk pengaturan, Menggunakan @capgo/capacitor-native-navigation untuk tata letak Chrome dan WebView native, dan Menggunakan @capgo/capacitor-transitions untuk gerakan rute WebView.