@capgo/capacitor-native-loader

Render loader yang rapi di atas, di bawah, di sekitar, atau menggantikan WebView menggunakan tampilan native iOS dan Android.

Mulai GitHub

Jalan render native

Tampilkan loader sebagai tampilan overlay UIKit dan Android daripada meminta WebView untuk menganimasi efek transparan yang mahal.

Pemilihan fleksibel

Tempatkan loader penuh layar, berpusat, dipasang ke tepi, Chrome-style di atas, atau di sekitar WebView dengan margin aman.

Loader bawaan dan aset

Gunakan pengisi native Siri-style, Siri v2 edge, Chrome top progress, orbit, ring, pulse, dots, bars, wave, halo, gambar, atau Lottie-based loaders.

Jalankan di mana saja

Trigger pengisi dari JavaScript, Swift, Kotlin, atau plugin native lainnya melalui native publik API.

Kapan Menggunakannya

@capgo/capacitor-native-loader Digunakan untuk pengisi keadaan yang harus tetap halus, transparan, dan native saat WebView sibuk, mengubah ukuran, berpindah, atau tertutup di balik permukaan native.

Pakai ketika kamu membutuhkan:

lapisan pengisi transparan full-screen di atas konten web
bar pengisi Chrome-style di atas yang dapat mengubah ukuran WebView tanpa menutupi konten
pengisi di tepi atas, bawah, kiri, atau kanan aplikasi
pengisi di sekitar WebView yang diubah ukuran sementara konten native menguasai sebagian layar
pengisi fallback native yang bertahan saat rendering web berat, perubahan rute, atau pekerjaan startup
Pemanggilan loader bersamaan yang diaktifkan oleh plugin native lain sebelum JavaScript siap
Animasi pengisian yang didukung oleh Lottie, gambar yang dibundel, atau sumber daya jarak jauh

Demo gaya

Gaya	Penglihatan
Siri
Siri v2
Chrome atas
Ring
Titik-titik
Batas
Gelombang
Orbit
Pulse
Halo
Sekeliling
Lottie
Gambar

Inti API

show(options) menampilkan loader dan mengembalikannya. id.
update(options) mengubah loader yang ada tanpa menghancurkan overlay.
setProgress(options) mengupdate progress loader yang dapat dilihat.
hide(options) menghapus satu loader.
hideAll(options) menghapus semua loader.
setWebViewLayout(options) mengatur ukuran atau memasukkan WebView/tubuh agar loader asli dapat berada di sampingnya.
resetWebViewLayout(options?) mengembalikan tata letak asli WebView/tubuh.
getState() mengembalikan id loader yang saat ini dapat dilihat.
configure(options) menetapkan gaya default, posisi, warna, gerakan, dan perilaku.

Model Penempatan

placement menentukan di mana permukaan asli muncul:

fullscreen menutupi seluruh aplikasi, dengan kemampuan transparan.
center menempatkan pembawa kompak loader di atas WebView.
top, bottom, left, dan right menempelkan pembawa loader ke tepi yang aman dan menyadari area.
chrome gaya menggunakan bar atas native penuh lebar dan cocok dengan webView.mode: 'resize'.
around menampilkan gerakan loader di sekitar frame layar.
custom menggunakan frame eksplisit untuk alur kerja plugin native atau tampilan split.

Pilih interactionMode: 'passThrough' ketika pengguna dapat terus berinteraksi dengan WebView, block ketika memuat harus mencegah sentuhan, atau loaderOnly ketika hanya permukaan loader yang harus menerima sentuhan.

Teruskan dari @capgo/capacitor-native-loader

Jika Anda menggunakan @capgo/capacitor-native-loader untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Getting Started untuk detail implementasi, @capgo/capacitor-native-navigation untuk tata letak chrome dan WebView native, @capgo/capacitor-transitions untuk rute web motion, dan Menggunakan @capgo/capacitor-loader native untuk tutorial.