@capgo/capacitor-loader

Percorso di rendering nativo

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

Posizionamento flessibile

Colloca caricamenti a schermo intero, centrati, fissati ad un bordo, Chrome-style in alto, o intorno al WebView con insetti di area sicura.

Caricamenti integrati e di risorsa

Utilizza caricamenti 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

Attiva caricamenti da JavaScript, Swift, Kotlin o altri plugin nativi tramite il pubblico nativo API.

Quando Usare

@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 Chrome-style che possono ridimensionare il WebView al posto di coprire il contenuto
• caricatori di angolo superiore, inferiore, sinistro o destro dell'app
• caricatori intorno a un WebView ridimensionato mentre il contenuto nativo possiede una parte dello schermo
• caricatori di fallback nativi che sopravvivono a pesanti elaborazioni di rendering web, cambi di rotta o lavoro di avvio
• caricatori condivisi attivati da un altro plugin nativo prima che JavaScript sia pronto
• animazioni di caricamento basate su Lottie, immagini incorporate o asset remoti

Nota

Per le animazioni delle route esclusivamente web, utilizzare @capgo/capacitor-transizioni. Utilizzare il caricamento nativo quando lo stato di caricamento stesso deve essere nativo o quando il WebView deve essere ridimensionato durante il caricamento.

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 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/nativo per far sì che i caricatori nativi possano apparire accanto a essa.
• resetWebViewLayout(options?) ripristina la disposizione originale della vista web/nativa.
• getState() restituisce gli id dei caricatori attualmente visibili.
• configure(options) imposta lo stile predefinito, la posizione, i colori, la movimento e il comportamento.

Modello di posizionamento

placement controlla dove appare la superficie nativa:

• fullscreen copre l'intera app, facoltativamente trasparente.
• center fa sì che un caricatore compatto galleggi sopra il WebView.
• top, bottom, lefte right attacca i caricatori a un bordo sicuro-aware.
• chrome lo stile utilizza una barra superiore nativa di ampiezza completa e si abbina bene con webView.mode: 'resize'.
• around rende la movenza del caricatore intorno al frame dello schermo.
• custom utilizza un frame esplicito per i flussi di lavoro plugin nativo o a schermo diviso.

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 i tocchi.

Continua da @capgo/capacitor-native-loader

Se stai utilizzando @capgo/capacitor-native-loader per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Getting Started per i dettagli di implementazione, @capgo/capacitor-native-navigation per la disposizione del Chrome e WebView nativi, @capgo/capacitor-transitions per la movimento delle route web, e Utilizzando @capgo/capacitor-native-loader per il tutorial.