@capgo/capacitor-native-Loader

Native-Rendervorschlag

Zeigen Sie Loader als UIKit- und Android-Overlay-Views an, anstatt dem WebView teure, durchsichtige Effekte animieren zu lassen.

Flexible Platzierung

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

Integrierte und Asset-Loader

Verwenden Sie native Siri-Style, Siri v2 Edge, Chrome-Top-Progress, Orbit, Ring, Pulse, Dots, Bars, Wave, Halo, Bild oder Lottie-basierte Loader.

Ruft überall auf.

Rufen Sie Loader aus JavaScript, Swift, Kotlin oder anderen native Plugins über die öffentliche native API auf.

Wann Es Verwenden

@capgo/capacitor-native-loader ist für Ladezustände, die glatt, durchsichtig und native bleiben sollen, während der WebView beschäftigt, sich vergrößert, navigiert oder hinter native Oberflächen verborgen ist.

Verwenden Sie es, wenn Sie benötigen:

• transparente, vollbildschirmige Ladeebenen über Webinhalten
• Chrome-Style-Top-Progress-Leisten, die sich anpassen können und den WebView anstatt des Inhalts verdecken
• Edge-Loader an der Oberseite, Unterseite, linken oder rechten Seite der App
• Loader um einen vergrößerten WebView herum, während native Inhalte einen Teil der Bildschirmfläche besitzen
• native fallback-Loader, die bei schwerem Web-Rendering, Routenänderungen oder Startarbeiten überleben
• Geladene Lader, die durch einen anderen native Plugin ausgelöst werden, bevor JavaScript bereit ist
• Lottie, gebundene Bild 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 sollte oder wenn der WebView während des Ladens umgebaut werden muss.

Demo-Stile

Stil	Vorschau
Siri
Siri v2
Chrome oben
Ring
Punkte
Balken
Welle
Orbit
Pulse
Halo
Around
Lottie
Bild

Core API

• show(options) zeigt einen Lader an und gibt seinen Status zurück id.
• update(options) ändert einen bestehenden Lader ohne das Overlay herunterzufahren.
• setProgress(options) aktualisiert den Fortschritt eines bestimmten Laders.
• hide(options) entfernt einen Lader.
• hideAll(options) entfernt alle Lader.
• setWebViewLayout(options) passt die Größe oder den Rand des WebView/Körpers an, damit native Lader neben ihm sitzen können.
• resetWebViewLayout(options?) setzt die ursprüngliche Anordnung des WebView/Körpers wieder her.
• getState() gibt die IDs der derzeit sichtbaren Lader zurück.
• configure(options) setzt die Standard-Design, -Position, -Farben, -Bewegung und -Verhalten.

Platzierungsmodell

placement bestimmt, wo die native Oberfläche erscheint:

• fullscreen bedeckt die gesamte App, optional durchsichtig.
• center setzt einen kompakten Loader über der WebView.
• top, bottom, left, und right pinnt Loader an einer sicheren Kante.
• chrome Der Stil verwendet eine vollbreite native Oberfläche und passt sich gut mit webView.mode: 'resize'.
• around rendern Sie 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 die Laden sollte verhindern, Tipps, oder loaderOnly Wenn nur die Loader Oberfläche sollte Empfänger Berührung.

Fortsetzen von @capgo/capacitor-native-loader

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader verwenden @capgo/capacitor-native-loader um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Zur Anmeldung zur Implementierung der Details, @capgo/capacitor-native-navigation zur native Chrome und WebView Layout, @capgo/capacitor-transitions für Web-Routenbewegung und Mit @capgo/capacitor-native-Loader für das Tutorial.