@capgo/capacitor-native-loader

Ruta de renderizado nativo

Muestra los loaders como vistas de superposición de UIKit y Android en lugar de pedirle al WebView que anime efectos translúcidos costosos.

Colocación flexible

Coloca los loaders a pantalla completa, centrados, fijos a un borde, estilo Chrome en la parte superior, o alrededor del WebView con insets que respetan el área segura.

Loaders integrados y de assets

Usa loaders nativos estilo Siri, Siri v2 edge, progreso superior de Chrome, orbit, ring, pulse, dots, bars, wave, halo, image o basados en Lottie.

Llamable en cualquier lugar

Activa los loaders desde JavaScript, Swift, Kotlin u otros plugins nativos a través de la API nativa pública API.

Soporte de plataformas

Plataforma	Soporte	Notas
iOS	Sí	Nativo
Android	Sí	Nativo
Web	No	Protege con Capacitor.getPlatform()

Cuándo usarlo

@capgo/capacitor-native-loader sirve para estados de carga que deben mantenerse fluidos, translúcidos y nativos mientras el WebView está ocupado, se redimensiona, navega o está oculto detrás de superficies nativas.

Úsalo cuando necesites:

• capas de carga transparentes a pantalla completa sobre el contenido web
• Barras de progreso superiores estilo Chrome que redimensionan el WebView en lugar de cubrir el contenido
• cargadores en los bordes superior, inferior, izquierdo o derecho de la app
• cargadores alrededor de un WebView redimensionado mientras el contenido nativo ocupa parte de la pantalla
• cargadores nativos de respaldo que resisten renderizado web intenso, cambios de ruta o tareas de inicio
• cargadores compartidos activados por otro plugin nativo antes de que JavaScript esté listo
• animaciones de carga basadas en Lottie, imágenes empaquetadas o recursos remotos

Nota

Para animaciones de rutas solo web, usa @capgo/capacitor-transitions. Usa Native Loader cuando el estado de carga en sí debe ser nativo o cuando la WebView necesita redimensionarse durante la carga.

Demo Styles

Estilo	Vista previa
Siri
Siri v2
Chrome superior
Anillo
Puntos
Barras
Onda
Órbita
Pulse
Halo
Around
Lottie
Image

Núcleo de API

• show(options) muestra un loader y devuelve su id.
• update(options) cambia un loader existente sin desmontar el overlay.
• setProgress(options) actualiza el progreso del loader determinado.
• hide(options) elimina un loader.
• hideAll(options) elimina todos los loaders.
• setWebViewLayout(options) redimensiona o ajusta el WebView/body para que los loaders nativos se sitúen a su lado.
• resetWebViewLayout(options?) restaura el layout original del WebView/body.
• getState() devuelve los ids de los loaders visibles actualmente.
• configure(options) sets default style, placement, colors, motion, and behavior.

Modelo de ubicación

placement controla dónde aparece la superficie nativa:

• fullscreen cubre toda la app, opcionalmente translúcida.
• center flota un loader compacto sobre el WebView.
• top, bottom, left, y right fija los loaders al borde respetando el safe-area.
• chrome el estilo usa una barra superior nativa de ancho completo y combina bien con webView.mode: 'resize'.
• around muestra la animación del loader alrededor del marco de la pantalla.
• custom usa un marco explícito para flujos de native-plugin o split-view.

Usa interactionMode: 'passThrough' cuando los usuarios pueden seguir interactuando con el WebView, block cuando la carga debe bloquear los taps, o loaderOnly cuando solo la superficie del loader debe recibir toques.

Continúa desde @capgo/capacitor-native-loader

Si estás usando @capgo/capacitor-native-loader para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con Primeros pasos para detalles de implementación, @capgo/capacitor-native-navigation para el chrome nativo y el layout de WebView, @capgo/capacitor-transitions para la animación de rutas web, y Usando @capgo/capacitor-native-loader para el tutorial.