@capgo/capacitor-native-loader

Utilisez des chargeurs natifs iOS et Android pour afficher des chargeurs polissés au-dessus, en dessous, autour ou à la place de la vue WebView.

Commencez GitHub

Chemins de rendu natif

Affichez les chargeurs comme des vues de surimpression UIKit et Android au lieu de demander à la vue WebView d'animer des effets translucides coûteux.

Placement flexible

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

Chargeurs intégrés et chargés de ressources

Utilisez des chargeurs natifs Siri-style, édges Siri v2, Chrome haut progress, orbit, anneau, pulse, points, barres, vague, halo, image ou basés sur Lottie.

Appelables partout

Déclenchez les chargeurs à partir de JavaScript, Swift, Kotlin ou d'autres plugins natifs à l'aide de la méthode publique native API.

When Utiliser Cela

@capgo/capacitor-native-loader est pour les états de chargement qui doivent rester lisses, translucides et natifs 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 d'angle à gauche, droite, haut ou bas 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 fallback 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 le JavaScript ne soit prêt
des animations de chargement basées sur Lottie, sur une image embarquée ou sur un atelier distant

Styles de démonstration

Style	Aperçu
Siri
Siri v2
Chrome top
Ring
Dots
Bars
Wave
Orbit
Pulse
Halo
Around
Lottie
Image

Noeud central API

show(options) affiche un chargeur et retourne son id. id.
update(options) modifie un chargeur existant sans détruire l'overlay.
setProgress(options) met à jour la progression d'un 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 ids des chargeurs actuellement visibles.
configure(options) configure la disposition par défaut, les couleurs, les mouvements et le comportement.

Modèle de placement

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 à un bord éloigné sûr.
chrome l'aspect utilise une barre supérieure native pleine largeur et s'accorde 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 WebView, block lorsque le chargement doit empêcher les touches, 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 les détails d'implémentation, @capgo/capacitor-native-navigation pour la mise en page de chrome et WebView natives, @capgo/capacitor-transitions pour le mouvement des routes web, et Utilisez @capgo/capacitor-native-loader pour le tutoriel.