@capgo/capacitor-native-loader

Jalan Render Native

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

Penempatan Fleksibel

Tempatkan loader fullscreen, berpusat, dipasang ke tepi, Chrome-style di atas, atau di sekitar WebView dengan margin aman yang menyadari area aman.

Pengaturan Loader Bawaan dan Asset

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

Gunakan di mana saja.

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

Kapan Menggunakannya

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

Pakai saat Anda membutuhkan:

• layer pengisi transparan penuh 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 telah diubah ukurannya saat konten native menguasai sebagian layar
• pengisi fallback native yang bertahan dari rendering web berat, perubahan halaman, atau pekerjaan startup
• loader yang bersamaan yang diaktifkan oleh plugin native lain sebelum JavaScript siap
• animasi pengisian yang didukung oleh Lottie, gambar yang dibundel, atau aset jarak jauh

Catatan

Untuk animasi jalur web hanya, gunakan @capgo/capacitor-transisi. Gunakan Native Loader ketika status pengisian itu sendiri harus native atau ketika WebView perlu diresizkan saat pengisian.

Demo gaya

Gaya	Pratinjau
Siri
Siri v2
Chrome atas
Ring
Dots
Bars
Gelombang
Orbit
Pulse
Halo
Sekeliling
Lottie
Gambar

Inti API

• show(options) menampilkan loader dan mengembalikan idnya id.
• update(options) mengubah loader yang sudah ada tanpa menghancurkan overlay.
• setProgress(options) mengupdate progress loader yang dapat dilihat.
• hide(options) menghapus satu loader.
• hideAll(options) menghapus semua loader.
• setWebViewLayout(options) mengubah atau menggeser WebView/tubuh sehingga loader asli dapat ditempatkan di sampingnya.
• resetWebViewLayout(options?) mengembalikan tata letak WebView/tubuh asli.
• getState() mengembalikan id loader yang sedang ditampilkan.
• configure(options) menetapkan gaya default, posisi, warna, gerakan, dan perilaku.

Model Penempatan

placement menentukan di mana permukaan native muncul:

• fullscreen menutupi seluruh aplikasi, dengan transparansi opsional.
• center mengapungkan loader kompak di atas WebView.
• top, bottom, left, dan right menempelkan loader ke tepi yang aman dan sadar area.
• chrome gaya menggunakan bar native penuh lebar di atas 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 memuat, apakah 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.