@capgo/capacitor-loader nativo

Ruta de renderizado nativo

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

Colocación flexible

Colocar loaders 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

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

Se puede llamar en cualquier lugar.

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

Título de sección “Cuándo Usarlo”

@capgo/capacitor-native-loader Usa cuando necesites:

capas de carga transparentes y de pantalla completa por encima del contenido web

• barras de progreso de Chrome estilo en la parte superior 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 renderización web pesada, cambios de ruta o trabajo de inicio
• Cuándo Usarlo
• cargadores compartidos desencadenados por otro plugin nativo antes de que esté listo JavaScript
• animaciones de carga respaldadas por Lottie, imagen embutida o recurso remoto

Nota

Para animaciones de ruta web únicamente, utilice @capgo/capacitor-transicionesUtilice 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
Pulse
Halo
Alrededor
Lottie
Imagen

Núcleo API

• show(options) muestra un cargador y devuelve su id id.
• update(options) cambia un cargador existente sin destruir 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) 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 controla dónde aparece la superficie nativa:

• fullscreen cubre toda la aplicación, opcionalmente translúcida.
• center flota un cargador compacto sobre el 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 renderiza la animación del cargador alrededor del marco de pantalla.
• custom usa un marco explícito para workflows de plugin nativo o de vista dividida.

Usar interactionMode: 'passThrough' cuando los usuarios pueden seguir interactuando con el WebView, block cuando se debe evitar que los usuarios hagan clic mientras se carga, 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 nativos, conecta con Getting Started para obtener detalles de implementación, @capgo/capacitor-native-navigation para la configuración de layout de Chrome y WebView nativos, @capgo/capacitor-transiciones para rutas web de movimiento, y Usando @capgo/capacitor-loader nativo para el tutorial.