@capgo/capacitor-Pemuatan Asli

Jalur Pemrosesan Asli

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

Penempatan Fleksibel

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

Pembebanan dan Asset Loader yang Dibangun

Gunakan loader asli Siri-style, edge Siri v2, Chrome top progress, orbit, ring, pulse, titik, baris, gelombang, halo, gambar, atau berdasarkan Lottie.

Dapat Dipanggil di Mana Saja

Aktifkan loader dari JavaScript, Swift, Kotlin, atau plugin native lainnya melalui native API yang terbuka.

Kapan Menggunakannya

@capgo/capacitor-native-loader digunakan untuk mengatur keadaan muat yang harus tetap halus, transparan, dan asli sementara WebView sibuk, memperbesar, berpindah, atau disembunyikan di balik permukaan asli.

Gunakan saat Anda membutuhkan:

• lapisan muat transparan penuh di atas konten web
• bar kemajuan gaya Chrome di atas yang dapat memperbesar WebView daripada menutupi konten
• loader di pojok atas, bawah, kiri, atau kanan aplikasi
• loader di sekitar WebView yang telah dipanjangkan sementara konten asli menguasai sebagian layar
• loader fallback asli yang bertahan selama rendering web berat, perubahan rute, atau pekerjaan startup
• loader bersama yang dipicu oleh plugin asli lain sebelum JavaScript siap
• Animasi pengaturan beban Lottie, gambar terkompilasi, atau aset jarak jauh

Catatan

Untuk animasi rute web hanya @capgo/capacitor-transisiPilih menggunakan Native Loader ketika status loading itu sendiri harus asli atau ketika WebView perlu diregangkan ukurannya saat loading.

Demo gaya

Gaya	Pratinjau
Siri
Siri v2
Chrome atas
Loader Ring
Loader Dots
Loader Bars
Loader Wave
Loader Orbit
Loader Pulse
Halo
Di Sekitar
Lottie
Gambar

Inti API

• show(options) menampilkan loader dan mengembalikannya id.
• update(options) mengubah penglihatan yang ada tanpa menghancurkan overlay
• setProgress(options) mengupdate progress loader determinatif.
• hide(options) menghapus satu loader.
• hideAll(options) menghapus semua loader.
• setWebViewLayout(options) mengatur ukuran atau memasukkan tampilan WebView/body agar loader native dapat berada di sampingnya.
• resetWebViewLayout(options?) mengembalikan tampilan 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 native muncul:

• fullscreen menutupi seluruh aplikasi, dengan kemampuan transparan.
• center mengapungkan loader kompak di atas WebView.
• top, bottom, leftdan right menempelkan loader ke tepi yang sadar area.
• chrome gaya 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 aliran kerja native-plugin atau split-view.

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

Teruskan dari @capgo/capacitor-native-loader

Jika Anda menggunakan @capgo/capacitor-loader Nativ untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Mulai Menggunakan untuk detail implementasi @capgo/capacitor-navigation Nativ untuk tata letak chrome dan WebView native @capgo/capacitor-transisi untuk gerakan rute web, dan Menggunakan @capgo/capacitor-loader Nativ untuk tutorial.