@capgo/capacitor-native-loader

Muestra loaders animados nativos, overlays transparentes, assets de Lottie y estados de carga con redimensionamiento de WebView desde JavaScript o code nativo

Empezar GitHub

Ruta de renderizado nativa

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

Ubicación flexible

Coloca loaders en pantalla completa, centrados, fijados a un borde, estilo Chrome en la parte superior o alrededor del WebView con insets que respetan el safe-area.

Loaders integrados y por assets

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

Llamables desde cualquier lugar

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

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 es para estados de carga que deben mantenerse fluidos, translúcidos y nativos mientras el WebView está ocupado, redimensionándose, navegando o 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
loaders en los bordes superior, inferior, izquierdo o derecho de la app
loaders alrededor de un WebView redimensionado mientras el contenido nativo ocupa parte de la pantalla
loaders nativos de fallback que resisten el renderizado web intenso, cambios de ruta o procesos de inicio
loaders compartidos activados por otro plugin nativo antes de que JavaScript esté listo
animaciones de carga con Lottie, imágenes integradas o assets remotos

Estilos de demo

Estilo	Vista previa
Siri
Siri v2
Chrome superior
Ring
Dots
Bars
Wave
Orbit
Pulse
Halo
Alrededor
Lottie
Imagen

Núcleo de API

show(options) muestra un loader y devuelve su id.
update(options) cambia un loader existente sin destruir el overlay.
setProgress(options) actualiza el progreso de un loader determinate.
hide(options) elimina un loader.
hideAll(options) elimina todos los loaders.
setWebViewLayout(options) redimensiona o aplica insets al WebView/body para que los loaders nativos se posicionen junto a él.
resetWebViewLayout(options?) restaura el layout original del WebView/body.
getState() devuelve los ids de los loaders visibles actualmente.
configure(options) configura el estilo, posición, colores, movimiento y comportamiento por defecto.

Modelo de posicionamiento

placement controla dónde aparece la superficie nativa:

fullscreen cubre toda la app, opcionalmente con transparencia.
center muestra un loader compacto flotando sobre el WebView.
top, bottom, left, y right fija los loaders al borde respetando el safe-area.
chrome el estilo usa una barra nativa superior de ancho completo y combina con webView.mode: 'resize'.
around renderiza una animación de carga 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 y la interfaz nativos, conéctalo con Primeros pasos para detalles de implementación, @capgo/capacitor-native-navigation para el layout de Chrome y WebView nativo, @capgo/capacitor-transitions para la transición de rutas web, y Usando @capgo/capacitor-native-loader para el tutorial.