@capgo/capacitor-native-loader

Mit nativen iOS- und Android-Ansichten laden Sie die Loader oben, unten, um oder anstelle der WebView.

Native Render Pfad

Lader als UIKit- und Android-Overlayansichten anstatt die WebView zu bitten, teure durchsichtige Effekte zu animieren.

Flexible Platzierung

Lader vollbildschirm, zentriert, an einer Kante gepinnt, Chrome-Stil oben oder um die WebView herum mit sicherheitsbereichsbewussten Einstellungen.

Integrierte und Asset-Lader

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

Aufrufbar überall

Aktivieren Sie Lader aus JavaScript, Swift, Kotlin oder anderen nativen Plugins über die öffentliche native API.

Wann es verwenden

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

Benutzen Sie es, wenn Sie benötigen:

Transparente, vollbildschirmfähige Ladeoverlay über Webinhalten
Chrome-stilige oberen Fortschrittsleisten, die sich anstelle der Überdeckung von Inhalten anpassen können
Ladeoverlay an der Oberseite, Unterkante, linken oder rechten Seite der App
Ladeoverlay um ein angepasstes 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 native Plugin ausgelöst werden, bevor JavaScript bereit ist
Ladeanimationen, die auf Lottie, ein eingebundenes Bild oder eine remote Asset basieren

Demo Styles

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

Kern API

show(options) zeigt einen Loader an und gibt seinen Status 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) vergrößert oder einfügt die WebView/Körper so, dass native Loader neben ihm sitzen können.
resetWebViewLayout(options?) wiederherstellt die ursprüngliche WebView/Körper-Anordnung.
getState() gibt die derzeit sichtbaren Loader-IDs zurück.
configure(options) setzt die Standard-Style, -Anordnung, -Farben, -Bewegung und -Verhalten.

Platzierungsmodell

placement steuert, wo der native Oberfläche erscheint:

fullscreen bedeckt den gesamten App, optional durchsichtig.
center legt einen kompakten Loader über der WebView an.
top, bottom, leftund right pinnen die Loader an eine sichere Bereiche bewusste Kante.
chrome Der Stil verwendet eine volle Breite native obere Leiste und passt sich gut mit webView.mode: 'resize'.
around Rendert 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.

Weitermachen von @capgo/capacitor-native-loader

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 und 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