@capgo/capacitor-native-Loader

Rendere fein abgestimmte Loader über, unter, um oder anstelle des WebView mithilfe von nativen iOS- und Android-Ansichten.

Loslegen GitHub

Native-Rendervorschau

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

Flexible Platzierung

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-Rand, Chrome-Top-Progress, Orbit, Ring, Pulse, Dots, Bars, Wave, Halo, Bild oder Lottie-basierte Loader.

Ruft überall auf

Ruft 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, vollbildige Ladeebenen über Webinhalten
Chrome-Style-Top-Progress-Leisten, die sich anpassen können und die WebView stattdessen statt des Inhalts verdecken
Randloader an der Oberseite, Unterkante, linken oder rechten Seite der App
Loader um eine vergrößerte WebView herum, während native Inhalte einen Teil der Bildschirmfläche besitzen
native fallback-Loader, die überwiegende Web-Rendering, Routenänderungen oder Startarbeiten überleben
Geladene Lader, die durch einen anderen native Plugin ausgelöst werden, bevor JavaScript bereit ist
Lottie, ein mit einem Bild oder einem Remote-Asset-basierten Ladeanimationen

Demo-Styles

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 Größe und Position 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 sich die native Oberfläche zeigt:

fullscreen bedeckt die gesamte App, optional durchsichtig.
center ein kompakter Loader über der WebView schweben lässt.
top, bottom, left, und right Loader an einer sicheren Kante anheften.
chrome Der Stil verwendet eine native Top-Leiste von voller Breite und passt sich gut mit webView.mode: 'resize'.
around Loader-Bewegungen um den Bildschirmrahmen an.
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 Ladevorgänge verhindern sollen, oder loaderOnly Wenn nur die Ladeoberfläche Berührungseindrücke erhalten soll.

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 Anwendung Zur Implementierung der Details, @capgo/capacitor-native-navigation zur nativen Chrome- und WebView-Anordnung, @capgo/capacitor-transitions für Web-Routenbewegung und Mit @capgo/capacitor-native-Loader für das Tutorial.