@capgo/capacitor-Native-Loader

Native Render-Pfad

Laden Sie Loader als UIKit- und Android-Überlagerungsansichten anstatt, dass die WebView teure, durchsichtige Effekte animiert.

Flexible Platzierung

Platzieren Sie Loader vollbild, zentriert, an einer Kante, Chrome-Style an der Oberseite oder um die WebView herum mit sicherheitsbereichsbewussten Einstellungen.

Integrierte und Asset-Loader

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

Aufrufbar überall

Auslösen Sie 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 vorgesehen, die während der Beschäftigung, der Vergrößerung, der Navigation oder der Verdeckung durch native Oberflächen glatt, durchsichtig und native bleiben.

Verwenden Sie es, wenn Sie benötigen:

• transparente, vollbildige Ladeebenen über Webinhalten
• Chrome-Style-Progressbalken oben, die sich an die Größe des WebView anpassen können, anstatt den Inhalt zu bedecken
• Kantenläderer am oberen, unteren, linken oder rechten Rand der App
• Lader um einen vergrößerten WebView herum, während native Inhalte einen Teil der Bildschirmfläche besetzen
• native fallback-Lader, die bei schwerer Web-Rendering, Routenänderungen oder Startarbeiten überleben
• geteilte Lader, die durch einen anderen native Plugin ausgelöst werden, bevor JavaScript bereit ist
• Lottie, gebundene Bilddatei oder remote-Asset-basierte Ladeanimationen

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 die WebView während des Ladens umgebaut werden muss.

Demo-Stile

Stil	Vorschau
Siri
Siri v2
Chrome oben
Ring
Dots
Bars
Wave
Orbit
Pulse
Hallo
Um
Lottie
Bild

Kern API

• show(options) zeigt einen Loader an und gibt ihn zurück id.
• update(options) ändert einen bestehenden Loader ohne das Overlay herunterzufahren.
• setProgress(options) aktualisiert den deterministischen Laderfortschritt.
• hide(options) entfernt einen Lader.
• hideAll(options) entfernt alle Ladern.
• setWebViewLayout(options) resiziert oder einfügt die WebView/Körper, damit native Loader neben ihm sitzen können.
• resetWebViewLayout(options?) wiederherstellt die ursprüngliche WebView/Körper-Anordnung.
• getState() gibt die derzeit sichtbaren Lader-IDs zurück.
• configure(options) setzt die Standard-Design, -Anordnung, -Farben, -Bewegung und -Verhalten.

Platzierungsmodell

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

• fullscreen bedeckt den gesamten App-Bereich, optional durchsichtig.
• center legt einen kompakten Lader über dem WebView an.
• top, bottom, leftund right pinnt Loader an einem sicheren Bereich bewussten Rand.
• chrome Stil verwendet eine volle Breite native Top-Leiste und passt gut zu webView.mode: 'resize'.
• around rendern Sie die 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 den Tasten verhindern soll oder loaderOnly wenn nur die Loader-Oberfläche Berührungseindrücke erhalten soll.

Fortsetzen von @capgo/capacitor-native-Loader

Wenn Sie native-Loader verwenden @capgo/capacitor-Native-Loader um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit 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