@capgo/capacitor-native-loader

Visualizza caricabili nativi sopra, sotto, intorno o al posto del WebView utilizzando viste iOS e Android native.

Percorso di rendering nativo

Mostra i caricatori come viste di overlay UIKit e Android al posto di chiedere al WebView di animare effetti traslucidi costosi.

Posizionamento flessibile

Posiziona i caricatori a schermo intero, centrati, fissi a un bordo, Chrome-style in alto, o intorno al WebView con insetti sicuri di area.

Caricatori nativi e di risorse

Utilizza caricatori nativi di stile Siri, Siri v2 edge, Chrome top progress, orbit, anello, pulsante, punti, barre, onda, halo, immagine o basati su Lottie.

Chiamabile in ogni dove

Carica caricabatterie da JavaScript, Swift, Kotlin o altri plugin nativi tramite il API nativo pubblico.

Quando Usarlo

@capgo/capacitor-native-loader è per gli stati di caricamento che dovrebbero rimanere lisci, trasparenti e nativi mentre il WebView è occupato, si sta ridimensionando, navigando o è nascosto dietro superfici native.

Usalo quando hai bisogno di:

layer di caricamento trasparenti a schermo intero sopra il contenuto web
barre di avanzamento a stile Chrome che possono ridimensionare il WebView al posto di coprire il contenuto
caricabatterie ai bordi superiore, inferiore, sinistro o destro dell'app
caricabatterie intorno a un WebView ridimensionato mentre il contenuto nativo possiede una parte dello schermo
caricabatterie di fallback native che sopravvivono a pesanti elaborazioni web, cambi di rotta o lavoro di avvio
caricabatterie condivise attivate da un altro plugin nativo prima che JavaScript sia pronto
animazioni di caricamento basate su Lottie, immagini incorporate o asset remoti

Stili di Demo

Stile	Anteprima
Siri
Siri v2
Chrome top
Anello
Punti
Barre
Onda
Orbita
Pulse
Halo
Around
Lottie
Immagine

Core API

show(options) visualizza un caricamento e restituisce il suo id.
update(options) modifica un caricatore esistente senza smontare l'overlay.
setProgress(options) aggiorna il progresso di un caricatore determinato.
hide(options) rimuove un caricatore.
hideAll(options) rimuove tutti i caricatori.
setWebViewLayout(options) ridimensiona o inserisce la vista Web/body per far sì che i caricatori nativi possano essere accanto a essa.
resetWebViewLayout(options?) ripristina la disposizione originale della vista Web/body.
getState() restituisce gli ID dei caricatori visibili attualmente.
configure(options) imposta lo stile predefinito, la posizione, i colori, la movimentazione e il comportamento.

Modello di Posizionamento

placement controlla dove appare la superficie nativa:

fullscreen copre l'intera app, facoltativamente trasparente.
center fa apparire un caricatore compatto sopra il WebView.
top, bottom, lefte right aggiusta i caricatori a un bordo sicuro.
chrome utilizza uno stile che utilizza una barra superiore nativa di larghezza completa e si abbina bene con webView.mode: 'resize'.
around rende in moto il caricatore intorno al frame dello schermo.
custom utilizza un frame esplicito per workflow plugin nativo o split-view.

Usa interactionMode: 'passThrough' quando gli utenti possono continuare ad interagire con il WebView, block quando il caricamento dovrebbe impedire i tocchi, o loaderOnly quando solo la superficie del caricatore dovrebbe ricevere tocchi.

Continua da @capgo/capacitor-native-loader

Se stai utilizzando @capgo/capacitor-native-loader per pianificare il comportamento di media e interfaccia nativa, collegalo con Getting Started per i dettagli di implementazione, @capgo/capacitor-native-navigation per la disposizione di Chrome e WebView nativa, @capgo/capacitor-transitions per la movimentazione delle rotte web, e Utilizzando @capgo/capacitor-native-loader per il tutorial.