@capgo/capacitor-native-loader

Tampilkan native animated loaders, overlay transparan, aset Lottie, dan loading state WebView-resizing dari JavaScript atau native code

Mulai sekarang GitHub

Jalur render Native

Tampilkan loader sebagai view overlay UIKit dan Android, bukan meminta WebView menganimasikan efek transparan yang berat.

Penempatan fleksibel

Atur loader secara fullscreen, tengah, menempel di tepi, gaya Chrome di bagian atas, atau di sekeliling WebView dengan inset yang sadar safe-area.

Loader bawaan dan loader aset

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

Bisa dipanggil di mana saja

Picu loader dari JavaScript, Swift, Kotlin, atau plugin native lain melalui API native publik.

Dukungan platform

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

Kapan Harus Digunakan

@capgo/capacitor-native-loader digunakan untuk loading state agar tetap smooth, transparan, dan native saat WebView sedang sibuk, resize, navigasi, atau tertutup di balik native surfaces.

Gunakan saat Anda butuh:

layer loading full-screen transparan di atas konten web
progress bar atas ala Chrome yang bisa 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 menguasai sebagian layar
native fallback loader yang tetap jalan saat rendering web berat, perubahan route, atau startup
shared loader yang dipicu oleh plugin native lain sebelum JavaScript siap
animasi loading berbasis Lottie, bundled image, atau remote asset

Demo Style

Style	Preview
Siri
Siri v2
Chrome teratas
Ring
Dots
Bars
Wave
Orbit
Pulse
Halo
Sekitar
Lottie
Gambar

Inti API

show(options) menampilkan loader dan mengembalikan id.
update(options) mengubah loader yang ada tanpa menutup overlay.
setProgress(options) memperbarui progress determinate loader.
hide(options) menghapus satu loader.
hideAll(options) menghapus semua loader.
setWebViewLayout(options) mengubah ukuran atau memberi inset pada WebView/body agar native loader bisa berada 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 aplikasi, opsional transparan.
center menampilkan loader ringkas yang melayang di atas WebView.
top, bottom, left, dan right sematkan loader pada edge yang sadar safe-area.
chrome style menggunakan native top bar full-width dan cocok dengan webView.mode: 'resize'.
around merender loader motion di sekitar frame layar.
custom menggunakan frame eksplisit untuk workflow native-plugin atau split-view.

Gunakan interactionMode: 'passThrough' saat pengguna tetap bisa berinteraksi dengan WebView, block saat loading harus mencegah tap, atau loaderOnly saat hanya permukaan loader yang boleh 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 layout native Chrome dan WebView, @capgo/capacitor-transitions untuk motion rute web, dan Menggunakan @capgo/capacitor-native-loader untuk tutorialnya.