Mulai

Pemasangan

Anda dapat menggunakan Pengaturan Bantu AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Lalu gunakan prompt berikut:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-native-loader` plugin in my project.

Jika Anda lebih suka Manual Setup, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

1. Pasang paket

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

2. Tampilkan loader asli dari JavaScript

   import { NativeLoader } from '@capgo/capacitor-native-loader';
   
   const { id } = await NativeLoader.show({
     style: 'siri',
     placement: 'fullscreen',
     message: 'Preparing workspace',
     colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
     scrimColor: 'rgba(3, 7, 18, 0.42)',
     interactionMode: 'block',
   });
   
   await doExpensiveWork();
   
   await NativeLoader.hide({ id });

Konfigurasi Default

await NativeLoader.configure({
  defaults: {
    style: 'orbit',
    placement: 'center',
    size: 96,
    colors: ['#38bdf8', '#a78bfa'],
    reducedMotion: 'system',
    interactionMode: 'passThrough',
  },
});

Loader Top Chrome-Style

Gunakan style: 'chrome' ketika Anda ingin progress bar atas browser yang familiar dan WebView harus tetap dapat digunakan di bawahnya.

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 Siri V2 Edge Loader

Gunakan style: 'siri-v2' ketika status pemuatan harus menjadi gerakan warna penuh layar asli di sekitar tepi aplikasi daripada kartu yang berpusat.

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

Perbarui Progress

const { id } = await NativeLoader.show({
  style: 'ring',
  message: 'Uploading',
  progress: 0,
});

for await (const progress of uploadFile(file)) {
  await NativeLoader.setProgress({ id, progress });
}

await NativeLoader.hide({ id });

Ubah Ukuran WebView

Pilih setWebViewLayout ketika loader asli harus menguasai sebagian layar sementara konten web tetap terlihat dan dapat digunakan.

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

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

Pulihkan tata letak asli ketika permukaan asli hilang:

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

Pemutar Lottie dan Pemuat Gambar

Gabungkan JSON Lottie atau aset gambar dalam aplikasi asli dan rujukkannya dari JavaScript.

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

await NativeLoader.show({
  style: 'image',
  placement: 'bottom',
  asset: {
    type: 'image',
    source: 'loader-frame',
  },
});

Catatan

Sumber daya remote didukung, tetapi aset native yang dibundel lebih baik untuk muatan awal karena tersedia sebelum inisialisasi jaringan dan JavaScript selesai.

Panggilan Swift Native

Plugin iOS lainnya dapat memanggil loader bersama secara langsung.

import CapgoCapacitorNativeLoader

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

NativeLoader.shared.setProgress(id: id, progress: 0.6)
NativeLoader.shared.hide(id: id)

Panggilan Kotlin Native

Plugin Android lainnya dapat memanggil objek publik dari Kotlin atau Java.

import app.capgo.nativeloader.NativeLoader

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

NativeLoader.setProgress(id, 0.6)
NativeLoader.hide(id)

Pilihan Umum

Opsi	Jenis	Deskripsi
style	'siri' | 'siri-v2' | 'chrome' | 'orbit' | 'ring' | 'pulse' | 'dots' | 'bars' | 'wave' | 'halo' | 'lottie' | 'image'	Pengrender Loader
placement	'center' | 'top' | 'bottom' | 'left' | 'right' | 'fullscreen' | 'around' | 'custom'	Posisi permukaan asli
interactionMode	'passThrough' | 'block' | 'loaderOnly'	Pengaturan sentuhan
backgroundColor	string	Warna overlay, termasuk alpha
scrimColor	string	Warna scrim penuh layar atau sekitar layar
colors	string[]	Warna gradasi loader
progress	number	Nilai determinasi dari 0 ke 1
autoHide	number	Milisecond sebelum disembunyikan secara otomatis
asset	object	Sumber aset Lottie atau gambar

Gunakan reducedMotion: 'system' untuk menghormati pengaturan gerakan platform pengguna.