Native Loader Plugin Capacitor

Usando @capgo/capacitor-native-loader

@capgo/capacitor-native-loader renderizza gli stati di caricamento tramite view native iOS e Android. Usalo quando un loader deve rimanere fluido mentre la WebView è occupata, quando gli effetti fullscreen trasparenti sono costosi in CSS, o quando un altro plugin nativo deve mostrare una UI di caricamento prima che JavaScript sia pronto.

Installa

npm install @capgo/capacitor-native-loader
npx cap sync

Native Loader a tutto schermo

import { NativeLoader } from '@capgo/capacitor-native-loader';

const { id } = await NativeLoader.show({
  style: 'siri',
  placement: 'fullscreen',
  message: 'Preparing your session',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  scrimColor: 'rgba(3, 7, 18, 0.42)',
  interactionMode: 'block',
});

await initializeAppData();
await NativeLoader.hide({ id });

Edge Loader con ridimensionamento WebView

await NativeLoader.setWebViewLayout({
  mode: 'inset',
  insets: { top: 96 },
  animated: true,
});

await NativeLoader.show({
  style: 'wave',
  placement: 'top',
  message: 'Syncing changes',
  interactionMode: 'passThrough',
});

Al termine del caricamento, ripristina la WebView:

await NativeLoader.hideAll({ restoreWebView: true });

Barra di progresso superiore stile Chrome

Usa il loader nativo superiore quando vuoi una barra di caricamento stile browser sopra la WebView, senza dover far animare il CSS durante le operazioni pesanti.

const { id } = await NativeLoader.show({
  style: 'chrome',
  placement: 'top',
  colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
  thickness: 4,
  interactionMode: 'passThrough',
  webView: {
    mode: 'resize',
    insets: { top: 12 },
    restoreOnHide: true,
  },
});

await NativeLoader.hide({ id, restoreWebView: true });

Siri V2 Edge Loader

Usa siri-v2 per un loader nativo a tutto schermo che anima un bordo colorato mentre la WebView rimane visibile.

const { id } = await NativeLoader.show({
  style: 'siri-v2',
  placement: 'fullscreen',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  thickness: 10,
  scrimColor: 'rgba(3, 7, 18, 0.10)',
  interactionMode: 'passThrough',
});

await NativeLoader.hide({ id });

Lottie Loader

await NativeLoader.show({
  style: 'lottie',
  placement: 'center',
  asset: {
    type: 'lottie',
    source: 'loader.json',
    loop: true,
  },
});

Gli asset inclusi nel bundle sono ideali per i loader di avvio, poiché sono disponibili prima delle richieste di rete e dell'inizializzazione di JavaScript.

Chiamate ai plugin nativi

Il plugin espone API native pubbliche, permettendo ad altri plugin di mostrare o nascondere i loader direttamente.

Swift:

import CapgoCapacitorNativeLoader

let id = NativeLoader.shared.show(options: [
  "style": "orbit",
  "placement": "fullscreen",
  "message": "Opening secure session"
])

NativeLoader.shared.hide(id: id)

Kotlin:

import app.capgo.nativeloader.NativeLoader

val id = NativeLoader.show(
  activity = activity,
  options = mapOf(
    "style" to "orbit",
    "placement" to "fullscreen",
    "message" to "Loading profile",
  ),
  webView = bridge.webView,
)

NativeLoader.hide(id)

Link utili

• GitHub: https://github.com/Cap-go/capacitor-native-loader/
• Docs: /docs/plugins/native-loader/

Continua da Utilizzo di @capgo/capacitor-native-loader

Se stai usando Usando @capgo/capacitor-native-loader per pianificare il comportamento dei media nativi e dell'interfaccia, collegalo a @capgo/capacitor-native-loader per i dettagli di implementazione, Per iniziare for setup, Usando @capgo/capacitor-native-navigation per il layout di Chrome nativo e WebView, e Uso di @capgo/capacitor-transitions per il movimento delle rotte WebView.