@capgo/capacitor-native-loader

Percorso di rendering nativo

Mostra i loader come viste UIKit e overlay Android, invece di chiedere alla WebView di animare effetti traslucidi costosi.

Posizionamento flessibile

Posiziona i loader a tutto schermo, centrati, ancorati a un bordo, in alto in stile Chrome o attorno alla WebView con margini adattati alla safe-area.

Loader integrati e basati su asset

Utilizza loader nativi in stile Siri, Siri v2 edge, Chrome top progress, orbit, ring, pulse, dots, bars, wave, halo, image o basati su Lottie.

Chiamabile ovunque

Attiva i loader da JavaScript, Swift, Kotlin o altri plugin nativi tramite API nativa pubblica.

Supporto piattaforme

Piattaforma	Supporto	Note
iOS	Sì	Nativo
Android	Sì	Nativo
Web	No	Proteggi con Capacitor.getPlatform()

Quando usarlo

@capgo/capacitor-native-loader serve per gestire stati di caricamento fluidi, traslucidi e nativi mentre la WebView è occupata, si ridimensiona, naviga o è coperta da elementi nativi.

Usalo quando ti serve:

• layer di caricamento trasparenti a tutto schermo sopra i contenuti web
• barre di progresso in alto stile Chrome che ridimensionano la WebView invece di coprire i contenuti
• loader ai bordi superiore, inferiore, sinistro o destro dell'app
• loader attorno a una WebView ridimensionata mentre il contenuto nativo occupa parte dello schermo
• loader di fallback nativi che restano attivi durante rendering web pesante, cambi di route o startup
• loader condivisi attivati da un altro plugin nativo prima che JavaScript sia pronto
• animazioni di caricamento con Lottie, immagini nel bundle o asset remoti

Nota

Per le animazioni di route solo web, usa @capgo/capacitor-transitions. Usa Native Loader quando lo stato di caricamento deve essere nativo o quando la WebView deve essere ridimensionata durante il caricamento.

Stili demo

Stile	Anteprima
Siri
Siri v2
Chrome in alto
Anello
Punti
Barre
Onda
Orbita
Impulso
Halo
Around
Lottie
Image

Il core API

• show(options) mostra un loader e ne restituisce il id.
• update(options) modifica un loader esistente senza smontare l'overlay.
• setProgress(options) aggiorna il progresso del loader determinato.
• hide(options) rimuove un loader.
• hideAll(options) rimuove tutti i loader.
• setWebViewLayout(options) ridimensiona o applica un inset alla WebView/body per posizionare i loader nativi accanto ad essa.
• resetWebViewLayout(options?) ripristina il layout originale di WebView/body.
• getState() restituisce gli ID dei loader attualmente visibili.
• configure(options) imposta stile, posizionamento, colori, animazione e comportamento predefiniti.

Modello di posizionamento

placement controlla dove appare la superficie nativa:

• fullscreen copre l'intera app, opzionalmente in modo traslucido.
• center mostra un loader compatto sopra la WebView.
• top, bottom, left, e right fissa i loader su un bordo che rispetta la safe-area.
• chrome lo stile utilizza una barra nativa a tutta larghezza e si abbina perfettamente a webView.mode: 'resize'.
• around renderizza il movimento del loader attorno al frame dello schermo.
• custom usa un frame esplicito per workflow con native-plugin o split-view.

Usa interactionMode: 'passThrough' quando gli utenti possono continuare a interagire con la WebView, block quando il caricamento deve bloccare i tap, o loaderOnly quando solo la superficie del loader deve ricevere i touch.

Continua da @capgo/capacitor-native-loader

Se stai usando @capgo/capacitor-native-loader per pianificare il comportamento dei media nativi e dell'interfaccia, collegalo a Per iniziare per i dettagli di implementazione, @capgo/capacitor-native-navigation per il layout di chrome nativo e WebView, @capgo/capacitor-transitions per le transizioni delle rotte web, e Usando @capgo/capacitor-native-loader per il tutorial.