@capgo/capacitor-native-loader

Affichez des chargeurs raffinés au-dessus, en dessous, autour ou au lieu de la vue WebView à l'aide de vues natives iOS et Android.

Commencez GitHub

Route de rendu natif

Afficher les chargeurs sous forme de vues d'overlay UIKit et Android au lieu de demander au WebView d'animer des effets coûteux translucides.

Emplacement flexible

Placez les chargeurs plein écran, centrés, collés à un bord, Chrome-style en haut, ou autour du WebView avec des espaces de sécurité-aware.

Chargeurs intégrés et de ressources

Utilisez des chargeurs natifs Siri-style, édges Siri v2, Chrome haut de progression, orbite, anneau, pulsation, points, barres, vague, halo, image ou basés sur Lottie.

Appelables partout

Activez les chargeurs natifs à partir de JavaScript, Swift, Kotlin ou d'autres plugins natifs à l'aide du plugin natif public API.

Quand l'utiliser

@capgo/capacitor-native-loader C'est pour les états de chargement qui doivent rester smooth, translucide et natif tandis que la vue Web est occupée, redimensionnée, naviguée ou cachée derrière des surfaces natives.

Utilisez-le lorsque vous avez besoin de :

des couches de chargement transparentes en plein écran au-dessus du contenu Web
des barres de progression Chrome-style qui peuvent redimensionner la vue Web au lieu de recouvrir le contenu
des chargeurs sur le bord supérieur, inférieur, gauche ou droit de l'application
des chargeurs autour d'une vue Web redimensionnée tandis que le contenu natif possède une partie de l'écran
des chargeurs de remplacement natifs qui survivent à une charge lourde de la mise en page Web, aux changements de route ou au travail de démarrage
des chargeurs partagés déclenchés par un autre plugin natif avant que JavaScript soit prêt
des animations de chargement basées sur Lottie, sur une image embarquée ou sur un atelier distant

Demo Styles

Style	Aperçu
Siri
Siri v2
Chrome haut
Anneau
Points
Barrés
Vague
Orbit
Pulse
Halo
Around
Lottie
Image

Noeud API

show(options) affiche un chargeur et retourne ses id.
update(options) modifie un chargeur existant sans détruire l'overlay.
setProgress(options) met à jour la progression du chargeur déterminé.
hide(options) supprime un chargeur.
hideAll(options) supprime tous les chargeurs.
setWebViewLayout(options) redimensionne ou insère la vue WebView/corps afin que les chargeurs natifs puissent s'y trouver à côté.
resetWebViewLayout(options?) restaure la disposition d'origine de la vue WebView/corps.
getState() retourne les identifiants des chargeurs actuellement visibles.
configure(options) fixe le style par défaut, la disposition, les couleurs, la motion et le comportement.

Modèle de placement

placement détermine où l'apparence de la surface native apparaît :

fullscreen couvre toute l'application, facultativement translucide.
center fait flotter un chargeur compact sur la vue WebView.
top, bottom, leftet right fixe les chargeurs à un bord éloigné de la zone de sécurité.
chrome l'aspect utilise une barre supérieure native de largeur maximale et s'accorde bien avec webView.mode: 'resize'.
around affiche le mouvement du chargeur autour de la bordure de l'écran.
custom utilise une fenêtre explicite pour les workflows de plugin natif ou de vue divisée.

Utilisez interactionMode: 'passThrough' lorsque les utilisateurs peuvent continuer à interagir avec la vue WebView, block lorsque le chargement doit empêcher les clics, ou loaderOnly lorsque seul la surface du chargeur doit recevoir les touches.

Continuez à partir de @capgo/capacitor-native-loader

Si vous utilisez @capgo/capacitor-native-loader pour planifier le comportement de médias et d'interface natives, connectez-le avec Getting Started pour obtenir des détails d'implémentation, @capgo/capacitor-native-navigation pour la mise en page de chrome et WebView natives, @capgo/capacitor-transitions pour la motion des routes web, et Utilisez @capgo/capacitor-native-loader pour le tutoriel.