@capgo/capacitor-native-loader

Nativer Render-Pfad

Zeige Loader als UIKit- oder Android-Overlay-Views an, anstatt die WebView für rechenintensive, transluzente Animationen zu nutzen.

Flexible Platzierung

Platziere Loader im Fullscreen, zentriert, an einem Rand fixiert, im Chrome-Stil oben oder um die WebView herum mit Safe-Area-Insets.

Integrierte und Asset-basierte Loader

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

Überall aufrufbar

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

Plattform-Support

Plattform	Support	Hinweise
iOS	Ja	Nativ
Android	Ja	Nativ
Web	Nein	Absichern mit Capacitor.getPlatform()

Anwendungsfälle

@capgo/capacitor-native-loader wird für Ladezustände verwendet, die flüssig, transluzent und nativ bleiben sollen, während die WebView beschäftigt ist, sich vergrößert, navigiert oder hinter nativen Oberflächen verborgen ist.

Nutze es, wenn du Folgendes benötigst:

• transparente Full-Screen-Loading-Layer über dem Web-Content
• Chrome-ähnliche Progress-Bars am oberen Rand, die das WebView verkleinern, statt Content zu verdecken
• Edge-Loader am oberen, unteren, linken oder rechten Rand der App
• Loader um ein verkleinertes WebView, während nativer Content einen Teil des Screens einnimmt
• Native Fallback-Loader, die bei schwerem Web-Rendering, Route-Changes oder beim Startup stabil bleiben
• Shared Loader, die durch ein anderes natives Plugin ausgelöst werden, bevor JavaScript bereit ist
• Lottie-, Bundle-Image- oder Remote-Asset-basierte Ladeanimationen

Hinweis

Für reine Web-Route-Animationen verwende @capgo/capacitor-transitionsNutze den Native Loader, wenn der Ladevorgang selbst nativ sein soll oder wenn die WebView während des Ladens angepasst werden muss.

Demo-Styles

Style	Vorschau
Siri
Siri v2
Chrome oben
Ring
Dots
Bars
Wave
Orbit
Pulse
Halo
Umgebend
Lottie
Bild

Kern von API

• show(options) zeigt einen Loader an und gibt dessen id.
• update(options) ändert einen bestehenden Loader, ohne das Overlay zu schließen.
• setProgress(options) Updates bestimmen den Fortschritt des Loaders.
• hide(options) entfernt einen Loader.
• hideAll(options) entfernt alle Loader.
• setWebViewLayout(options) skaliert oder versetzt die WebView/den Body, damit native Loader daneben platziert werden können.
• resetWebViewLayout(options?) stellt das ursprüngliche WebView/Body-Layout wieder her.
• getState() gibt die IDs der aktuell sichtbaren Loader zurück.
• configure(options) setzt Standardwerte für Style, Platzierung, Farben, Animation und Verhalten.

Platzierungsmodell

placement steuert, wo die native Oberfläche erscheint:

• fullscreen deckt die gesamte App ab, optional transparent.
• center platziert einen kompakten Loader über der WebView.
• top, bottom, left, und right Loader an einer Safe-Area-konformen Kante fixieren.
• chrome Das Styling nutzt eine native Top Bar in voller Breite und passt gut zu webView.mode: 'resize'.
• around rendert Loader-Animationen um den Bildschirmrahmen herum.
• custom nutzt einen expliziten Frame für Native-Plugin- oder Split-View-Workflows.

Nutze interactionMode: 'passThrough' wenn Nutzer weiterhin mit der WebView interagieren können, block wenn das Laden Taps verhindern soll, oder loaderOnly wenn nur die Loader-Oberfläche Touches empfangen soll.

Weiterlesen ab @capgo/capacitor-native-loader

Wenn Sie ... verwenden @capgo/capacitor-native-loader um natives Medien- und Interface-Verhalten zu planen, verbinde es mit Erste Schritte für Details zur Implementierung, @capgo/capacitor-native-navigation für das native Chrome- und WebView-Layout, @capgo/capacitor-transitions für Web-Route-Animationen und Verwendung von @capgo/capacitor-native-loader für das Tutorial.