@capgo/capacitor-native-loader

Afficher des chargeurs poli en haut, en bas, autour ou à la place de la vue WebView à l'aide de vues natives iOS et Android.

Commencer GitHub

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

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

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.

Appelables partout

Déclencher les chargeurs à partir de JavaScript, Swift, Kotlin ou d'autres plugins natifs à travers le API natif public.

Quand l'utiliser

@capgo/capacitor-native-loader C'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 avez besoin :

couche de chargement transparente en plein écran au-dessus du contenu web
barres de progression Chrome-style en haut qui peuvent redimensionner la vue WebView au lieu de recouvrir le contenu
chargeurs de bordure à gauche, droite, haut ou bas 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 à du travail de démarrage
chargeurs partagés déclenchés par un autre plugin natif avant que JavaScript ne soit prêt
animations de chargement basées sur Lottie, image embarquée ou ressource distante

Styles de démonstration

Style	Aperçu
Prévisualisation Siri
Prévisualisation de chargeur natif écran plein bord Siri v2
Prévisualisation de chargeur natif en forme de cercle
Prévisualisation de chargeur natif en forme de cercle
Points
Barrés
Vague
Orbite
Pulsation
Halo
Autour
Lottie
Image

Noeud API

show(options) affiche un chargeur et retourne son id.
update(options) modifie un chargeur existant sans détruire l'overlay.
setProgress(options) met à jour la progression du chargeur déterminant.
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 situer à 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, la disposition, les couleurs, la motion et le comportement.

Modèle de placement

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

fullscreen couvre toute l'application, optionnellement translucide.
center fait flotter un chargeur compact sur la vue WebView.
top, bottom, leftet right attachez les chargeurs à une bordure sécurisée-aware edge.
chrome l'utilisation d'un style utilise une barre supérieure native à pleine largeur et s'associe bien avec webView.mode: 'resize'.
around affiche la motion 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 des médias et des interfaces natives, connectez-le à Démarrage pour les détails d'implémentation, @capgo/capacitor-native-navigation pour la mise en page native et WebView de Chrome, @capgo/capacitor-transitions pour le mouvement des routes web, et Utilisation de @capgo/capacitor-native-loader pour le tutoriel.