@capgo/capacitor-native-loader

Rendre des chargeurs polissés au-dessus, en dessous, autour ou à la place de la vue WebView en utilisant les vues natives iOS et Android.

Commencer GitHub

Chemins de rendu natif

Afficher les chargeurs sous forme de vues de surcouche UIKit et Android au lieu de demander au navigateur Web 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 du navigateur Web avec des espaces de sécurité.

Chargeurs intégrés et de ressources

Utilisez des chargeurs natifs à la manière de Siri, avec l'edge de Siri v2, les progressions Chrome en haut, l'orbite, l'anneau, le pulse, les points, les barres, la vague, le halo, l'image ou les chargeurs basés sur Lottie.

Appelable partout.

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

Quand l'utiliser

@capgo/capacitor-native-loader C'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 plein écran au-dessus du contenu Web
Des barres de progression Chrome en haut qui peuvent redimensionner la vue Web au lieu de recouvrir le contenu
Des chargeurs à l'edge en haut, en bas, à gauche ou à droite 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 à la mise en œuvre lourde de la page, aux changements de route ou au 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, une image embarquée ou un élément distant

Styles de démonstration

Style	Prévisualisation
Siri
Siri v2
Chrome en haut
Anneau
Points
Barrages
Vague
Orbit
Pulse
Halo
Around
Lottie
Image

Core API

show(options) affiche un chargeur et renvoie son id.
update(options) met à jour 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 Web/body pour que les chargeurs natifs puissent s'y trouver à côté.
resetWebViewLayout(options?) restaure la disposition d'origine de la vue Web/body.
getState() renvoie les identifiants des chargeurs actuellement visibles.
configure(options) fixe le style par défaut, la mise en page, les couleurs, la motion et le comportement.

Modèle de placement

placement Contrôl’où l'apparence de la surface native apparaît :

fullscreen Recouvre l'ensemble de l'application, optionnellement translucide.
center Flotte un chargeur compact sur la vue Web.
top, bottom, left, et right Fixe les chargeurs à un bord éloigné du zone de sécurité.
chrome Le style utilise une barre native haute et complète et s'accorde bien avec webView.mode: 'resize'.
around Rend 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 Web, block lorsque la charge doit empêcher les touches, ou loaderOnly lorsque seulement la surface de la charge 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-l’avec Getting Started pour les détails d'implémentation, @capgo/capacitor-native-navigation pour la disposition de la barre d'outils et de la vue WebView natives, @capgo/capacitor-transitions pour la route web de mouvement, et En utilisant @capgo/capacitor-chargement natif pour le tutoriel.