@capgo/capacitor-native-loader

Chemin de rendu natif

Affichez les loaders en tant que vues UIKit et Android superposées, plutôt que de demander à la WebView d’animer des effets translucides coûteux.

Placement flexible

Placez les loaders en plein écran, centrés, ancrés à un bord, en haut au style Chrome, ou autour du WebView avec des insets tenant compte de la safe area.

Loaders intégrés et par assets

Utilisez des loaders natifs de type Siri, Siri v2 edge, progression Chrome, orbite, anneau, pulsation, points, barres, onde, halo, image ou basés sur Lottie.

Appelable partout

Déclenchez les loaders depuis JavaScript, Swift, Kotlin ou d’autres plugins natifs via l’API natif public.

Support des plateformes

Plateforme	Support	Notes
iOS	Oui	Natif
Android	Oui	Natif
Le Web	Non	Protéger avec Capacitor.getPlatform()

Quand l'utiliser

@capgo/capacitor-native-loader est conçu pour charger des états qui doivent rester fluides, translucides et natifs pendant que la WebView est occupée, en cours de redimensionnement, en navigation ou masquée par des surfaces natives.

Utilisez-le lorsque vous avez besoin de :

• couches de chargement plein écran transparentes au-dessus du contenu web
• barres de progression en haut, façon Chrome, qui peuvent redimensionner la WebView au lieu de couvrir le contenu
• loaders edge en haut, en bas, à gauche ou à droite de l'application
• loaders autour d'une WebView redimensionnée pendant que du contenu natif occupe une partie de l'écran
• des loaders de repli natifs qui résistent au rendu web intensif, aux changements de route ou au démarrage
• loaders 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, des images intégrées ou des assets distants

Remarque

Pour les animations de route purement web, utilisez @capgo/capacitor-transitions. Utilisez Native Loader lorsque l’état de chargement lui-même doit être natif ou lorsque le WebView doit être redimensionné pendant le chargement.

Styles de démo

Style	Aperçu
Siri
Siri v2
Haut de Chrome
Anneau
Points
Barres
Vague
Orbite
Pulsation
Halo
Around
Lottie
Image

Cœur API

• show(options) affiche un loader et renvoie son id.
• update(options) modifie un loader existant sans démanteler l’overlay.
• setProgress(options) met à jour la progression du loader déterminé.
• hide(options) supprime un loader.
• hideAll(options) supprime tous les loaders.
• setWebViewLayout(options) redimensionne ou ajoute des marges au WebView/body pour que les loaders natifs puissent s’afficher à côté.
• resetWebViewLayout(options?) restaure la mise en page d’origine du WebView/body.
• getState() renvoie les ids des loaders actuellement visibles.
• configure(options) définit le style, l’emplacement, les couleurs, l’animation et le comportement par défaut.

Modèle d’emplacement

placement contrôle l’endroit où la surface native apparaît :

• fullscreen couvre toute l’application, éventuellement translucide.
• center affiche un loader compact au-dessus de la WebView.
• top, bottom, left, et right pin loaders to a safe-area-aware edge.
• chrome utilise une barre native pleine largeur et s’associe bien avec webView.mode: 'resize'.
• around affiche l’animation du loader autour du cadre de l’écran.
• custom utilise un frame explicite pour les workflows native-plugin ou split-view.

Utiliser interactionMode: 'passThrough' lorsque les utilisateurs peuvent continuer à interagir avec la WebView, block lorsque le chargement doit empêcher les appuis, ou loaderOnly lorsque seule la surface du loader doit recevoir les touches.

Continuez depuis @capgo/capacitor-native-loader

Si vous utilisez @capgo/capacitor-native-loader pour planifier le comportement des médias et de l'interface natifs, connectez-l’à Prise en main pour les détails d'implémentation, @capgo/capacitor-native-navigation pour la mise en page native Chrome et WebView, @capgo/capacitor-transitions pour les animations de routes web, et Utiliser @capgo/capacitor-native-loader pour le tutoriel.