@capgo/capacitor-Native-Loader

Native Render Pfad

Stattdessen als UIKit- und Android-Overlay-Views anzeigen, anstatt dem WebView teure, durchsichtige Effekte animieren zu lassen.

Flexible Platzierung

Platziere Loader vollbildschirm, zentriert, an einer Kante, Chrome-Stil am oberen Rand oder um die WebView herum mit sicherheitsbereichsbewussten Einstellungen.

Integrierte und Asset-Loader

Benutze native Siri-Style, Siri v2-Kante, Chrome-Oben-Progress, Orbit, Ring, Pulse, Punkte, Balken, Welle, Halo, Bild oder Lottie-basierte Loader.

Aufrufbar überall

Auslöse Loader aus JavaScript, Swift, Kotlin oder anderen native Plugins über die öffentliche native API.

Wann es verwenden

@capgo/capacitor-native-loader ist für Ladezustände bestimmt, die während der Beschäftigung, der Anpassung, der Navigation oder der Verdeckung hinter nativen Oberflächen glatt, durchsichtig und nativ bleiben sollen.

Verwenden Sie es, wenn Sie benötigen:

• transparente, vollbildschirmige Ladeoverlay über Webinhalten
• Chrome-Style-Progressbalken oben, die sich anpassen lassen und anstatt des Inhalts die WebView verdecken
• Ladeoverlay an der Ober-, Unter-, linken oder rechten Seite der App
• Ladeoverlay um eine angepasste WebView herum, während nativer Inhalt einen Teil der Bildschirmfläche besetzt
• nativer Fallback-Lader, die bei schwerer Web-Rendering, Routenänderungen oder Startarbeiten überleben
• geteilte Lader, die durch einen anderen nativen Plugin ausgelöst werden, bevor JavaScript bereit ist
• Lottie, gebundene Bild oder remote Asset-basierte Ladeanimationen

Hinweis

Für Web-routenanimationen verwenden Sie @capgo/capacitor-ÜbergängeVerwenden Sie Native Loader, wenn der Ladezustand selbst native sein soll oder wenn die WebView während des Ladens umgebaut werden muss.

Demo-Stile

Stil	Vorschau
Siri
Siri v2
Chrome oben
Ring
Punkte
Balken
Welle
Orbit
Puls
Halo
Umher
Lottie
Bild

Kern API

• show(options) zeigt einen Lader an und gibt ihn zurück id.
• update(options) ändern Sie einen bestehenden Loader ohne das Overlay herunterzufahren.
• setProgress(options) aktualisiert den Fortschritt eines bestimmten Loaders.
• hide(options) entfernt einen Loader.
• hideAll(options) entfernt alle Loader.
• setWebViewLayout(options) erweitert oder einfasst die WebView/Körper, damit native Loader neben ihm sitzen können.
• resetWebViewLayout(options?) setzt die ursprüngliche WebView/Körper-Anordnung wieder her.
• getState() gibt die derzeit sichtbaren Loader-IDs zurück.
• configure(options) setzt die Standard-Design, -Anordnung, -Farben, -Bewegung und -Verhalten.

Platzierungsmodell

placement bestimmt, wo sich die native Oberfläche befindet:

• fullscreen bedeckt den gesamten App-Bereich, optional durchsichtig.
• center floatet eine kompakte Loader über die WebView.
• top, bottom, left, und right pinnt Loader an einer sicheren Bereich bewussten Kante.
• chrome style verwendet eine vollbreite native Oberleiste und passt sich gut mit webView.mode: 'resize'.
• around renderet Loader-Bewegung um den Bildschirmrahmen.
• custom verwendet einen expliziten Rahmen für native-Plugin- oder Split-View-Workflows.

Use interactionMode: 'passThrough' wenn Benutzer mit der WebView interagieren können block wenn das Laden die Tasten verhindern soll, oder loaderOnly wenn nur die Loader-Oberfläche Berührungsempfindlich sein soll.

Fortsetzen von @capgo/capacitor-native-loader

Wenn Sie Native-Medien und -Interface-Verhalten planen @capgo/capacitor-Native-Loader um native Medien und Schnittstellen zu planen und zu verbinden Getting Started für Implementierungsdetails @capgo/capacitor-native-Navigation für native Chrome- und WebView-Ansichten @capgo/capacitor-Übergänge für Web-Route-Bewegungen und Mit @capgo/capacitor-native-loader für das Tutorial