@capgo/capacitor-native-loader

Jalur render native

Tampilkan loader sebagai overlay view UIKit dan Android, alih-alih meminta WebView untuk menganimasikan efek translusen yang berat.

Penempatan fleksibel

Letakkan loader fullscreen, di tengah, menempel di tepi, gaya Chrome di bagian atas, atau di sekitar WebView dengan inset yang memperhitungkan safe-area.

Loader bawaan dan aset

Gunakan loader native bergaya Siri, Siri v2 edge, progress atas Chrome, orbit, ring, pulse, dots, bars, wave, halo, image, atau berbasis Lottie.

Bisa dipanggil di mana saja

Aktifkan loader dari JavaScript, Swift, Kotlin, atau plugin native lainnya melalui API native publik.

Dukungan platform

Platform	Dukungan	Catatan
iOS	Ya	Native
Android	Ya	Native
Web	Tidak	Lindungi dengan Capacitor.getPlatform()

Kapan Digunakan

@capgo/capacitor-native-loader digunakan untuk loading state yang harus tetap smooth, transparan, dan native saat WebView sibuk, sedang resize, navigasi, atau tersembunyi di balik surface native.

Gunakan saat Anda butuh:

• layer loading full-screen transparan di atas konten web
• progress bar atas ala Chrome yang bisa me-resize WebView alih-alih menutupi konten
• edge loader di bagian atas, bawah, kiri, atau kanan aplikasi
• loader di sekitar WebView yang di-resize saat konten native menempati sebagian layar
• native fallback loader yang tetap jalan saat rendering web berat, perubahan route, atau proses startup
• shared loader yang dipicu oleh plugin native lain sebelum JavaScript siap
• animasi loading berbasis Lottie, bundled image, atau remote asset

Catatan

Untuk animasi route khusus web, gunakan @capgo/capacitor-transitions. Gunakan Native Loader jika status loading itu sendiri harus bersifat native atau jika WebView perlu di-resize saat proses loading.

Gaya Demo

Gaya	Pratinjau
Siri
Siri v2
Chrome atas
Ring
Dots
Bars
Wave
Orbit
Pulse
Halo
Sekitar
Lottie
Gambar

Inti API

• show(options) menampilkan loader dan mengembalikan objeknya id.
• update(options) mengubah loader yang sudah ada tanpa membongkar overlay.
• setProgress(options) memperbarui progres loader determinate.
• hide(options) menghapus satu loader.
• hideAll(options) menghapus semua loader.
• setWebViewLayout(options) mengubah ukuran atau memberi inset pada WebView/body agar native loader bisa tampil di sampingnya.
• resetWebViewLayout(options?) mengembalikan layout WebView/body ke semula.
• getState() mengembalikan ID loader yang sedang terlihat.
• configure(options) mengatur default style, placement, warna, motion, dan behavior.

Model Penempatan

placement mengontrol di mana native surface muncul:

• fullscreen menutupi seluruh app, opsional transparan.
• center menampilkan loader ringkas yang melayang di atas WebView.
• top, bottom, left, dan right pin loader ke tepi yang memperhitungkan safe area.
• chrome style menggunakan top bar native full-width dan cocok dipadukan dengan webView.mode: 'resize'.
• around merender animasi loader di sekitar bingkai layar.
• custom menggunakan bingkai eksplisit untuk workflow native-plugin atau split-view.

Gunakan interactionMode: 'passThrough' saat pengguna masih bisa berinteraksi dengan WebView, block saat loading harus mencegah tap, atau loaderOnly ketika hanya permukaan loader yang harus menerima sentuhan.

Lanjutkan dari @capgo/capacitor-native-loader

Jika Anda menggunakan @capgo/capacitor-native-loader untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan Panduan Memulai untuk detail implementasi, @capgo/capacitor-native-navigation untuk tata letak native chrome dan WebView, @capgo/capacitor-transitions untuk gerakan rute web, dan Menggunakan @capgo/capacitor-native-loader untuk tutorialnya.