Mulai Menggunakan

Copikan 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 Bantuan AI untuk memasang 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, pasang plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Install the package

bun add @capgo/capacitor-native-loader
bunx cap sync

Tampilkan loader native 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 });

Loader Edge Siri V2

Menggunakan style: 'siri-v2' ketika status loading harus berupa 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 });

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

Mengatur Ukuran View Web

Menggunakan setWebViewLayout ketika loader native harus menguasai bagian 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',
});

Kembalikan tata letak asli ketika permukaan native hilang:

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

Pembeban Lottie dan Image

Beberapa Lottie JSON atau aset gambar dalam aplikasi native dan referensikan 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 Native

Aplikasi 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 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)

Common Options

Pilihan	Jenis	context
`style`	`'siri' \| 'siri-v2' \| 'chrome' \| 'orbit' \| 'ring' \| 'pulse' \| 'dots' \| 'bars' \| 'wave' \| 'halo' \| 'lottie' \| 'image'`	Pengaturan Pemuat
`placement`	`'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'fullscreen' \| 'around' \| 'custom'`	Deskripsi Pemuatan Penerjemah Penerjemah permukaan asli
`interactionMode`	`'passThrough' \| 'block' \| 'loaderOnly'`	Pengenalan penggunaan
`backgroundColor`	`string`	Warna overlay, termasuk alpha
`scrimColor`	`string`	Warna skrin penuh atau sekitar skrin
`colors`	`string[]`	Warna gradasi loader
`progress`	`number`	Nilai determinasi dari `0` ke `1`
`autoHide`	`number`	Milisecond sebelum disembunyikan secara otomatis
`asset`	`object`	Milisecond sebelum disembunyikan secara otomatis

Use reducedMotion: 'system' Menghormati pengaturan gerakan platform pengguna.