@capgo/capacitor-native-loader

Ruta de renderizado nativo

Mostrar cargadores como vistas de overlay de UIKit y Android en lugar de preguntarle al WebView que anime efectos transparentes costosos.

Posición flexible

Coloca cargadores en pantalla completa, centrado, pegado a un borde, estilo Chrome en la parte superior, o alrededor del WebView con ajustes de área segura.

Cargadores integrados y de recursos

Utiliza cargadores nativos estilo Siri, borde de Siri v2, progreso en la parte superior de Chrome, órbita, anillo, pulsación, puntos, barras, ola, halo, imagen o basado en Lottie.

Llamable en cualquier lugar

Disparar cargadores desde JavaScript, Swift, Kotlin o otros plugins nativos mediante el plugin nativo público API.

Cuándo Usarlo

@capgo/capacitor-native-loader Es para estados de carga que deben mantenerse suaves, transparentes y nativos mientras el WebView está ocupado, redimensionado, navegando o oculto detrás de superficies nativas.

Utilízalo cuando necesites:

• capas de carga transparentes en pantalla completa sobre contenido web
• barras de progreso estilo Chrome que pueden redimensionar el WebView en lugar de cubrir el contenido
• cargadores en la parte superior, inferior, izquierda o derecha de la aplicación
• cargadores alrededor de un WebView redimensionado mientras el contenido nativo posee parte de la pantalla
• cargadores de fallback nativos que sobreviven a la carga pesada de web, cambios de ruta o trabajo de inicio
• cargadores compartidos disparados por otro plugin nativo antes de que esté listo JavaScript
• animaciones de carga respaldadas por Lottie, imágenes embaladas o recursos remotos

Nota

Para animaciones de rutas solo para web, utilice @capgo/capacitor-transiciones. Utilice el cargador nativo cuando el estado de carga mismo debe ser nativo o cuando el navegador web necesita ser redimensionado mientras se carga.

Estilos de demostración

Estilo	Vista previa
Siri
Siri v2
Chrome superior
Anillo
Puntos
Barras
Ola
Orbita
Pulse
Halo
Alrededor
Lottie
Imagen

Núcleo API

• show(options) muestra un cargador y devuelve sus id.
• update(options) cambia un cargador existente sin desmontar la capa de overlay.
• setProgress(options) actualiza el progreso del cargador determinado.
• hide(options) elimina un cargador.
• hideAll(options) elimina todos los cargadores.
• setWebViewLayout(options) redimensiona o ajusta el WebView/cuerpo para que los cargadores nativos puedan estar junto a él.
• resetWebViewLayout(options?) restaura el diseño original del WebView/cuerpo.
• getState() devuelve los ids de los cargadores visibles actualmente.
• configure(options) establece el estilo por defecto, ubicación, colores, movimiento y comportamiento.

Modelo de ubicación

placement controla dónde aparece la superficie nativa:

• fullscreen oculta la aplicación completa, opcionalmente translúcida.
• center flota un cargador compacto sobre la WebView.
• top, bottom, lefty right ancla cargadores a una orilla segura-aware.
• chrome el estilo utiliza una barra superior nativa de ancho completo y se combina bien con webView.mode: 'resize'.
• around representa el movimiento del cargador alrededor del marco de pantalla.
• custom usa un marco explícito para workflows de plugin nativo o de vista dividida.

Usa interactionMode: 'passThrough' cuando los usuarios pueden seguir interactuando con la WebView, block cuando el cargado debe evitar los toques, o loaderOnly cuando solo la superficie del cargador debe recibir toques.

Sigue adelante desde @capgo/capacitor-native-loader

Si estás utilizando @capgo/capacitor-native-loader para planificar el comportamiento de medios y interfaz nativa, conecta con Getting Started para detalles de implementación, @capgo/capacitor-native-navigation para la configuración de chrome y WebView nativa, @capgo/capacitor-transitions para la animación de rutas web, y Usando @capgo/capacitor-native-loader para el tutorial.