@capgo/capacitor-native-loader

Nativ render Pfad

Loader als UIKit- und Android-Überlagerungsansichten anzeigen, anstatt der WebView zu bitten, teure durchsichtige Effekte zu animieren.

Flexible Platzierung

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

Integrierte und Asset-Loader

Mit nativen Siri-Style, Siri v2 Edge, Chrome-Top-Progress, Orbit, Ring, Pulse, Dots, Bars, Wave, Halo, Bild oder Lottie-basierte Loader arbeiten.

Aufrufbar überall

Loader aus JavaScript, Swift, Kotlin oder anderen nativen Plugins auslösen, indem Sie den öffentlichen nativen API aufrufen.

Wann Es Zu Gebrauchen Ist

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

Benutze es, wenn du benötigst:

• transparente, vollbildschirmige Ladeoverlay über Webinhalten
• Chrome-Stil-Progressbalken oben, die sich anpassen lassen, anstatt den Inhalt zu bedecken
• Ladeoverlay an der Oberkante, Unterseite, linken oder rechten Seite der App
• Lader um einen angepassten WebView, während native Inhalte einen Teil der Bildschirmfläche besitzen
• native fallback-Lader, die bei schwerer Web-Rendering, Routenänderungen oder Startarbeiten überleben
• gemeinsame Lader, die durch einen anderen nativen Plugin ausgelöst werden, bevor JavaScript bereit ist
• Lottie, ein eingebundenes Bild oder ein remote-Asset-gesteuerter Ladeanimation

Hinweis

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

Demo-Stile

Stil	Vorschau
Siri
Siri v2
Chrome top
Ring
Dots
Bars
Wave
Orbit
Puls
Halo
Umherum
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 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 daran sitzen können.
• resetWebViewLayout(options?) wiederherstellt die ursprüngliche Anordnung des WebView/Körpers.
• getState() gibt die IDs der derzeit sichtbaren Loader zurück.
• configure(options) setzt die Standard-Design, -Anordnung, -Farben, -Bewegung und -Verhalten.

Platzierungsmodell

placement steuert, wo die native Oberfläche erscheint:

• fullscreen bedeckt das gesamte App, optional durchsichtig.
• center setzt einen kompakten Loader über der WebView.
• top, bottom, leftund right befestigt Loader an einer sicheren Kante.
• chrome stilisiert eine volle Breite native obere Leiste und passt sich gut mit webView.mode: 'resize'.
• around rendern Sie die Loader-Bewegung um das Bildschirmrahmen.
• 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ührungsempfindlich sein sollte.

Fahren Sie fort 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 Getting Started für Implementierungsdetails, @capgo/capacitor-native-navigation für native Chrome und WebView Layout, @capgo/capacitor-transitions für Web-Routenbewegung und Mit @capgo/capacitor-native-loader für das Tutorial.