@capgo/capacitor-native-loader

Jalan render native

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

Penempatan fleksibel

Tempatkan muatan fullscreen, di tengah, dipasang ke tepi, Chrome-style di atas, atau di sekitar WebView dengan margin aman.

Muatan bawaan dan muatan aset

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

Jalankan di mana saja.

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

Kapan Menggunakannya

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

Pakai saat Anda membutuhkan:

• lapisan pengisi transparan penuh layar di atas konten web
• bar kemajuan Chrome-style di atas yang dapat mengubah ukuran WebView tanpa menutupi konten
• pengisi edge di 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 rute, atau pekerjaan startup
• loader yang bersama-sama diaktifkan oleh plugin native lain sebelum JavaScript siap
• animasi pengisian yang didukung oleh Lottie, gambar yang dibundel, atau aset jarak jauh

Peringatan

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.

Gaya Demo

Gaya	Pratinjau
Siri
Siri v2
Chrome atas
Ring
Dots
Bar
Gelombang
Orbit
Pulse
Halo
Seputar
Lottie
Gambar

Inti API

• show(options) menampilkan loader dan mengembalikan ID-nya 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) mengatur ukuran atau memasukkan WebView/tubuh sehingga loader asli dapat ditempatkan di sampingnya.
• resetWebViewLayout(options?) mengembalikan tata letak asli WebView/tubuh.
• 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 menyadari 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.