@capgo/capacitor-native-loader

Native-Rendervorschlag

Lädt statt der WebView teure, durchsichtige Effekte als UIKit- und Android-Overlay-Views an.

Flexible Platzierung

Lädt den Loader vollbildschirm, zentriert, an einer Ecke, Chrome-Style an der Oberseite oder um die WebView herum mit sicherheitsbereichsbewussten Einstellungen.

Integrierte und Asset-Loader

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

Aufrufbar überall

Trigger Loader von JavaScript, Swift, Kotlin oder anderen native Plugins über die öffentliche native API.

Wann es verwenden

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

Verwende es, wenn du benötigst:

• transparente volle Bildschirm-Ladeoverlay über Webinhalten
• Chrome-Style-Top-Fortschritsleisten, die sich anpassen lassen, anstatt den Inhalt zu bedecken
• Ladeoverlay an der Oberkante, Unterseite, linken oder rechten Seite der App
• Ladeoverlay um einen angepassten WebView, während native Inhalte einen Teil der Bildschirmfläche besitzen
• native fallback-Ladeoverlay, die bei schwerer Web-Rendering, Routenänderungen oder Startarbeiten überleben
• Gemeinsame Ladeoverlay, die durch einen anderen native Plugin ausgelöst werden, bevor JavaScript bereit ist
• Lottie, eingebundene Bilddatei oder remote-Asset-gesteuerte Ladeanimationen

Hinweis

Für Routenanimationen, die nur im Web laufen, verwenden Sie @capgo/capacitor-Übergänge. Verwenden Sie Native Loader, wenn der Zustand der Ladevorgänge selbst native sein soll oder wenn die WebView während des Ladevorgangs umgebaut werden soll.

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 Loader an und gibt ihn zurück id.
• update(options) ändert einen bestehenden Loader ohne das Overlay abzubauen
• setProgress(options) aktualisiert den Fortschritt eines bestimmten Loaders
• hide(options) entfernt einen Loader
• hideAll(options) entfernt alle Loader
• setWebViewLayout(options) passt die Größe oder den Rand des WebView/Körpers an, damit native Loader 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 Loader zurück
• configure(options) setzt die Standard-Style, -Anordnung, -Farben, -Bewegung und -Verhalten

Placement-Modell

placement __CAPGO_KEEP_0__

• fullscreen __CAPGO_KEEP_0__
• center __CAPGO_KEEP_0__
• top, bottom, leftund right __CAPGO_KEEP_0__
• chrome für die gesamte App, optional durchsichtig. webView.mode: 'resize'.
• around ein kompakter Loader über der WebView anzeigt.
• custom Loader an einer sicheren Kante anheften.

Stil verwendet eine volle Breite native Oberfläche und passt sich gut mit interactionMode: 'passThrough' Loader-Bewegung um den Bildschirmrahmen an. block für native-Plugin- oder Split-View-Workflows einen expliziten Rahmen verwendet. loaderOnly Verwenden Sie dies, wenn Benutzer weiterhin mit der WebView interagieren können, wenn die Ladevorgänge Tastenblockieren sollen oder wenn nur die Loaderoberfläche Berührungsempfindlich sein sollte.

Bleiben Sie bei @capgo/capacitor-native-loader

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader @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-Ansicht, @capgo/capacitor-transitions für Web-Route-Bewegung und Mit @capgo/capacitor-native-loader für die Anleitung.