@capgo/capacitor-native-loader

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

Mulai GitHub

Rute Penerapan Asli

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

Penempatan Fleksibel

Tempatkan pemuat penuh layar, berpusat, dipasang ke tepi, gaya Chrome di atas, atau di sekitar WebView dengan margin aman yang menyadari area aman.

Pemuat Bawaan dan Aset

Gunakan pemuat Siri gaya bawaan, tepi Siri v2, top Chrome, orbit, lingkaran, puls, titik, baris, gelombang, halo, gambar, atau berdasarkan Lottie.

Dapat Dipanggil di Mana Saja

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

Mengapa Menggunakannya

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

Pakai saat Anda membutuhkan:

lapisan muat transparan full-screen di atas konten web
bar kemajuan gaya Chrome di atas WebView yang dapat mengubah ukuran WebView daripada menutupi konten
pengisi di tepi atas, bawah, kiri, atau kanan aplikasi
pengisi di sekitar WebView yang telah diubah ukurannya saat konten native menguasai sebagian layar
pengisi fallback native yang bertahan selama rendering web berat, perubahan halaman, atau pekerjaan startup
pengisi yang dipicu bersama oleh plugin native lainnya sebelum JavaScript siap
animasi muat yang didukung oleh Lottie, gambar yang dibundel, atau aset jarak jauh

Gaya Demo

Gaya	Penglihatan
Siri
Siri v2
Chrome atas
Ring
Dots
Barris
Gelombang
Orbit
Pulse
Halo
Sekeliling
Lottie
Gambar

Core API

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

Model Penempatan

placement menentukan di mana permukaan asli muncul:

fullscreen menutupi seluruh aplikasi, dengan kemungkinan transparan.
center mengapungkan loader kompak di atas WebView.
top, bottom, leftdan right menempelkan loader ke tepi yang aman dan sadar area.
chrome style menggunakan bar atas native penuh lebar dan cocok dengan webView.mode: 'resize'.
around menggambar gerakan loader di sekitar frame layar.
custom menggunakan frame eksplisit untuk alur kerja plugin native atau tampilan split.

Gunakan interactionMode: 'passThrough' ketika pengguna dapat terus berinteraksi dengan WebView, block ketika pengguna tidak boleh mengetuk, atau loaderOnly ketika hanya permukaan loader yang 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 native chrome dan WebView, @capgo/capacitor-transitions untuk gerakan rute web, dan Menggunakan @capgo/capacitor-native-loader untuk tutorial.