@capgo/capacitor-native-loader

Voie de rendu natif

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

Placement flexible

Placer 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 insets.

Chargeurs intégrés et de ressources

Utiliser 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.

Activable partout

Déclencher les chargeurs à partir de JavaScript, Swift, Kotlin ou d'autres plugins natifs à travers l'interface publique native API.

Quand l'utiliser

@capgo/capacitor-native-loader est pour les états de chargement qui doivent rester lisses, translucides et natifs tandis que le WebView est occupé, se redimensionne, navigue ou est caché derrière des surfaces natives.

Utilisez-le lorsque vous en avez besoin :

• Feuilles de chargement transparentes en plein écran au-dessus du contenu web
• Bannières de progression Chrome-style qui peuvent redimensionner la vue WebView au lieu de recouvrir le contenu
• Chargeurs d'angle situés en haut, en bas, à gauche ou à droite de l'application
• Chargeurs autour d'une vue WebView redimensionnée tandis que le contenu natif possède une partie de l'écran
• Chargeurs de fallback natifs qui survivent à une charge lourde de rendu web, à des changements de route ou au travail de démarrage
• Chargeurs partagés déclenchés par un autre plugin natif avant que le JavaScript ne soit prêt
• Animations de chargement basées sur Lottie, sur une image embarquée ou sur un atout distant

Note

Pour les animations de route web uniquement, utilisez @capgo/capacitor-transitions. Utilisez le chargeur natif lorsque l'état de chargement lui-même doit être natif ou lorsque la vue Web doit être redimensionnée pendant le chargement.

Styles de démonstration

Style	Aperçu
Siri
Siri v2
Chrome en haut
Anneau
Points
Barrés
Vague
Orbite
Pulsation
Halo
Autour
Lottie
Image

Noeud API

• show(options) affiche un chargeur et retourne son résultat id.
• update(options) modifie un chargeur existant sans détruire l'overlay.
• setProgress(options) met à jour la progression du chargeur déterministe.
• 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() renvoie les identifiants des chargeurs actuellement visibles.
• configure(options) définit le style par défaut, l'emplacement, les couleurs, la motion et le comportement.

Modèle d'emplacement

placement contrôle où 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 à une zone de sécurité consciente de l'aire.
• chrome l'application utilise un barre de haut native de largeur entière et s'associe bien avec webView.mode: 'resize'.
• around rend le mouvement du chargeur autour du cadre de l'écran.
• custom utilise un cadre explicite pour les workflows de plugin natif ou de vue divisée.

Utilisez interactionMode: 'passThrough' lorsque les utilisateurs peuvent continuer à interagir avec la Vue de navigateur, block lorsque le chargement doit empêcher les touches, ou loaderOnly lorsque seulement 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 Démarrage pour les détails d'implémentation, @capgo/capacitor-native-navigation pour la mise en page native de Chrome et WebView, @capgo/capacitor-transitions pour la motion de route web, et Utilisation de @capgo/capacitor-native-loader pour le tutoriel.