@capgo/capacitor-native-loader

Native Render Pfad

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

Flexible Platzierung

Ladefunktionen vollbild, zentriert, an einer Kante, Chrome-Stil am oberen Rand oder um das WebView herum mit sicherheitsbereichsbewussten Einstellungen anzeigen.

Integrierte und Asset-Ladefunktionen

Verwenden Sie native Siri-Stil, Siri v2-Kante, Chrome-Oben-Progress, Orbit, Ring, Pulse, Punkte, Balken, Welle, Halo, Bild oder Lottie-basierte Ladefunktionen.

Aufrufbar überall

Ladefunktionen von JavaScript, Swift, Kotlin oder anderen native Plugins über die öffentliche native API auslösen.

Wann Es Verwenden

@capgo/capacitor-native-loader Dies ist für Ladezustände geeignet, die während der Aktivität, der Größenanpassung, der Navigation oder der Verdeckung hinter native Oberflächen glatt, durchsichtig und native bleiben sollen.

Benutzen Sie es, wenn Sie benötigen:

• Transparente, vollbildschirmfähige Ladeoverlay über Webinhalten
• Chrome-stilige oberen Fortschrittsleisten, die sich an die Größe des WebView anpassen, anstatt Webinhalte zu bedecken
• Ladeoverlay an der oberen, unteren, linken oder rechten Seite der App
• Ladeoverlay um einen angepassten WebView herum, während native Inhalte einen Teil der Bildschirmfläche besetzen
• Native Ladeoverlay, die bei schwerer Web-Rendering, Routenänderungen oder Startarbeiten überleben
• Gemeinsame Ladeoverlay, die durch einen anderen nativen Plugin ausgelöst werden, bevor JavaScript bereit ist
• Ladeanimationen, die durch Lottie, eine eingebundene Bilddatei oder eine remote Asset unterstützt werden

Hinweis

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

Demo Styles

Stil	Vorschau
Siri
Siri v2
Chrome top
Ring
Punkte
Balken
Welle
Umlauf
Puls
Halo
Um
Lottie
Bild

Kern API

• show(options) zeigt einen Loader 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) anpasst die Größe oder den Inhalt des WebView/Körpers, damit native Loader neben ihm sitzen können.
• resetWebViewLayout(options?) wiederherstellt die ursprüngliche Anordnung des WebView/Körpers.
• getState() gibt die derzeit sichtbaren Loader-IDs zurück.
• configure(options) setzt die Standard-Design, -Anordnung, -Farben, -Bewegung und -Verhalten.

Platzierungsmodell

placement steuert, wo sich die native Oberfläche zeigt:

• fullscreen bedeckt das gesamte App, optional durchsichtig.
• center legt einen kompakten Loader über dem WebView an.
• top, bottom, leftund right pinnen die Loader an eine sicheren Bereich bewusste Kante.
• chrome Der Stil verwendet eine volle Breite native Oberkante und passt sich gut mit webView.mode: 'resize'.
• around Rendert die Loader-Bewegung um den Bildschirmrahmen herum.
• custom Verwendet einen expliziten Rahmen für native-Plugin- oder Split-View-Workflows.

Verwenden Sie interactionMode: 'passThrough' wenn Benutzer weiterhin mit der WebView interagieren können, block wenn das Laden die Tasten verhindern soll oder loaderOnly wenn nur die Loader-Oberfläche Berührungseindrücke erhalten soll.

Bleiben Sie bei @capgo/capacitor-native-loader weiter.

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader verwenden Wenn Sie @capgo/capacitor-native-loader verwenden um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Einstieg für Implementierungsdetails @capgo/capacitor-native-navigation für native Chrome- und WebView-Ansichten @capgo/capacitor-transitions für Web-Routenbewegungen Verwendung von @capgo/capacitor-native-loader für das Tutorial