@capgo/capacitor-cargador nativo

Ruta de renderizado nativo

Muestre los cargadores como vistas de overlay de UIKit y Android en lugar de pedirle al WebView que anime efectos transparentes costosos.

Posición flexible

Coloque los cargadores en pantalla completa, centrados, pegados a un borde, estilo Chrome en la parte superior, o alrededor del WebView con ajustes de área segura.

Cargadores integrados y de recursos

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

Todas las llamadas son posibles.

Activar cargadores desde JavaScript, Swift, Kotlin o otros plugins nativos a través del API nativo público.

Cuándo Usarlo

@capgo/capacitor-native-loader es para estados de carga que deben permanecer suaves, translúcidos y nativos mientras la WebView está ocupada, redimensionándose, navegando o oculta detrás de superficies nativas.

Utilícelo cuando necesite:

• capas de carga transparentes en pantalla completa sobre contenido web
• barras de progreso estilo Chrome en la parte superior que pueden redimensionar la WebView en lugar de cubrir el contenido
• cargadores en el borde superior, inferior, izquierdo o derecho de la aplicación
• cargadores alrededor de una WebView redimensionada mientras el contenido nativo posee parte de la pantalla
• cargadores de fallback nativos que sobreviven a la renderización web pesada, cambios de ruta o trabajo de inicio
• cargadores compartidos desencadenados por otro plugin nativo antes de que esté lista la JavaScript
• animaciones de carga respaldadas por Lottie, imagen embutida o recurso remoto

Nota

Para animaciones de ruta web únicamente, utilice @capgo/capacitor-transiciones. Utilice Native Loader cuando el estado de carga mismo debe ser nativo o cuando el WebView necesita ser redimensionado mientras se carga.

Estilos de demostración

Estilo	Vista previa
Siri
Siri v2
Chrome superior
Anillo
Puntos
Barras
Ola
Orbit
Pulso
Halo
Alrededor
Lottie
Imagen

Núcleo API

• show(options) muestra un cargador y devuelve su id.
• update(options) actualiza un cargador existente sin desmontar la capa de sobreposición.
• setProgress(options) actualiza el progreso del cargador determinado.
• hide(options) elimina un cargador.
• hideAll(options) elimina todos los cargadores.
• setWebViewLayout(options) ajusta o inserta el layout de la WebView/cuerpo para que los cargadores nativos puedan estar junto a ella.
• resetWebViewLayout(options?) restaura el layout original de la 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 colocación

placement donde aparece la superficie nativa:

• fullscreen cubre toda la aplicación, opcionalmente translúcida.
• center flota un cargador compacto sobre la WebView.
• top, bottom, left, y right pinja los cargadores a una orilla segura que es consciente de la zona segura.
• chrome el estilo utiliza una barra superior nativa de ancho completo y se combina bien con webView.mode: 'resize'.
• around renderiza el movimiento del cargador alrededor del marco de pantalla.
• custom usa un marco explícito para el flujo de trabajo de plugin nativo o de vista dividida.

Usar interactionMode: 'passThrough' cuando los usuarios pueden seguir interactuando con la WebView, block ¿Cuándo cargar debería evitar los toques, o loaderOnly ¿Cuándo solo la superficie del cargador debería recibir toques.

Sigue adelante desde @capgo/capacitor-cargador-nativo

Si estás utilizando @capgo/capacitor-cargador-nativo para planificar el comportamiento de medios y interfaz nativos, conectalo con Getting Started para detalles de implementación, @capgo/capacitor-navegación-nativa para la disposición de chrome y WebView nativos, @capgo/capacitor-transiciones para la ruta de movimiento web, y Usando @capgo/capacitor-cargador nativo para el tutorial.