Mulai

Copy sebuah prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-native-loader`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/native-loader/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Pemasangan

Anda dapat menggunakan Pengaturan Asisten 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 Pengaturan Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Pasang paket

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

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

Siri V2 Edge Loader

Gunakan style: 'siri-v2' ketika status loading harus menjadi gerakan warna penuh layar native di sekitar tepi aplikasi daripada kartu 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 });

Progres Perbarui

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 View Web

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

Mengembalikan tata letak asli ketika permukaan asli hilang:

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

Pemuat Lottie Dan Gambar

Packing Lottie JSON atau aset gambar dalam aplikasi asli dan mengacu ke mereka 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',
  },
});

Panggilan Swift Asli

Plugin iOS lain 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 Asli

Plugin Android lain 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

Pilihan	Tipe	Deskripsi
`style`	`'siri' \| 'siri-v2' \| 'chrome' \| 'orbit' \| 'ring' \| 'pulse' \| 'dots' \| 'bars' \| 'wave' \| 'halo' \| 'lottie' \| 'image'`	Renderer Loader
`placement`	`'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'fullscreen' \| 'around' \| 'custom'`	Posisi permukaan native
`interactionMode`	`'passThrough' \| 'block' \| 'loaderOnly'`	Penanganan sentuhan
`backgroundColor`	`string`	Warna overlay, termasuk alpha
`scrimColor`	`string`	Warna scrim penuh layar atau sekitar layar
`colors`	`string[]`	Warna gradasi loader
`progress`	`number`	Nilai determinan 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.