@capgo/capacitor-native-loader

Zeige native animierte Loader, transparente Overlays, Lottie-Assets und WebView-Resize-Ladezustände per JavaScript oder nativem code

Loslegen GitHub

Nativer Render-Pfad

Zeige Loader als UIKit- und Android-Overlay-Views, statt die WebView aufwendige transluzente Effekte animieren zu lassen.

Flexible Platzierung

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

Integrierte und Asset-basierte Loader

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

Überall aufrufbar

Löse Loader aus JavaScript, Swift, Kotlin oder anderen nativen Plugins über die öffentliche native API aus.

Plattformunterstützung

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

Wann verwenden

@capgo/capacitor-native-loader ist für Ladezustände gedacht, die flüssig, durchscheinend und nativ bleiben sollen, während die WebView beschäftigt ist, ihre Größe ändert, navigiert oder hinter nativen Oberflächen verborgen ist.

Nutze es, wenn du Folgendes benötigst:

transparente Full-Screen-Ladeebenen über dem Web-Content
Chrome-artige Fortschrittsbalken oben, die die WebView in der Größe ändern können, statt Inhalte zu verdecken
Edge-Loader am oberen, unteren, linken oder rechten Rand der App
Loader um eine in der Größe veränderte WebView, während nativer Content einen Teil des Bildschirms einnimmt
Native Fallback-Loader, die selbst bei intensivem Web-Rendering, Routenwechseln oder beim App-Start stabil bleiben
Shared Loader, die durch ein anderes natives Plugin ausgelöst werden, bevor JavaScript bereit ist
Ladeanimationen auf Basis von Lottie, gebündelten Bildern oder Remote-Assets

Demo-Styles

Style	Vorschau
Siri
Siri v2
Chrome oben
Ring
Punkte
Balken
Welle
Orbit
Puls
Hallo
Um
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) bestimmt 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, Position, Farben, Animation und Verhalten.

Placement-Modell

placement steuert, wo die native Oberfläche erscheint:

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

Nutzt 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 bei @capgo/capacitor-native-loader

Wenn du es nutzt @capgo/capacitor-native-loader , um natives Media- und Interface-Verhalten zu planen, verbinde es mit Erste Schritte für Implementierungsdetails, @capgo/capacitor-native-navigation für das native Chrome- und WebView-Layout, @capgo/capacitor-transitions für Web-Route-Animationen und Nutzung von @capgo/capacitor-native-loader für das Tutorial.