@capgo/capacitor-cargador nativo

Ruta de renderizado nativo

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

Posición flexible

Coloca 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

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.

Callable en cualquier lugar

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

Cuándo Usarlo

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

Utilízalo cuando necesites:

• Capas de carga transparente en pantalla completa por encima del contenido web
• barras de progreso estilo Chrome que pueden redimensionar la WebView en lugar de cubrir el contenido
• cargadores en la parte superior, inferior, izquierda o derecha de la aplicación
• cargadores alrededor de una WebView redimensionada mientras el contenido nativo ocupa parte de la pantalla
• cargadores nativos de fallback que sobreviven a intensas cargas de renderizado web, cambios de ruta o trabajo de arranque
• 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 solo en web, 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.

Demo Estilos

Estilo	Vista previa
Siri
Siri v2
Chrome superior
Círculo
Puntos
Barras
Onda
Órbita
Pulso
Halo
Alrededor
Lottie
Imagen

Núcleo API

• show(options) muestra un cargador y devuelve su id.
• update(options) cambia un cargador existente sin desmantelar 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) redimensiona o ajusta la WebView/cuerpo para que los cargadores nativos puedan estar a su lado.
• resetWebViewLayout(options?) restaura la disposición original de la WebView/cuerpo.
• getState() devuelve los ids de cargador 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 toda la aplicación, opcionalmente translúcida.
• center flota un cargador compacto sobre la WebView.
• top, bottom, left, y right ancla cargadores a una orilla segura consciente del área.
• chrome utiliza un barra superior nativa de ancho completo y se combina bien con webView.mode: 'resize'.
• around renders loader motion around the screen frame.
• custom usa un marco explícito para el plugin nativo o los flujos de vista dividida.

Usar 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-cargador nativo para planificar el comportamiento de medios y interfaz nativa, conecte con Getting Started para detalles de implementación @capgo/capacitor-navegación nativa para la configuración de chrome y WebView @capgo/capacitor-transiciones para el movimiento de rutas web, y Usando @capgo/capacitor-cargador nativo para el tutorial