@capgo/capacitor-chargement natif

Rendre des chargeurs affinés au-dessus, au-dessous, autour ou à la place de la vue WebView à l'aide de vues natives iOS et Android.

Commencez 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 translucides coûteux.

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, Siri v2 edge, Chrome top progress, orbit, anneau, pulse, points, barres, onde, halo, image ou basés sur Lottie.

Appelables partout

Déclencher les chargeurs depuis JavaScript, Swift, Kotlin ou d'autres plugins natifs à travers l'interface publique native 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, se redimensionne, navigue ou se trouve derrière des surfaces natives.

Utilisez-le lorsque vous avez besoin :

couche de chargement transparente en plein écran au-dessus du contenu web
Bannières de progression Chrome-style qui peuvent redimensionner la vue Web au lieu de recouvrir le contenu.
Chargeurs de bord en haut, bas, gauche ou droit de l'application
des chargeurs autour d'une vue WebView redimensionnée tandis que le contenu natif possède une partie de l'écran
chargeurs natifs de fallback qui résistent aux rendus web lourds, aux changements de route ou au travail de démarrage
Les chargeurs partagés déclenchés par un autre plugin natif avant que JavaScript soit prêt.
Animations de chargement basées sur Lottie, image embarquée ou ressource distante

Démos de styles

Style	Aperçu
Siri
Siri v2
Chrome haut
Bouclier
Points
Barrées
Vague
Orbite
Pulsation
Halo
Autour
Lottie
Image

Noyau API

show(options) affiche un chargeur et renvoie son état 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) ajuste ou insère la vue WebView/corps pour que les chargeurs natifs puissent s'y trouver à côté.
resetWebViewLayout(options?) restaure la disposition d'origine de la vue WebView/corps.
getState() returns currently visible loader ids.
configure(options) fixe le style par défaut, la disposition, les couleurs, la motion et le comportement.

Modèle de disposition

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

fullscreen recouvre toute l'application, optionnellement translucide.
center fait flotter un chargeur compact au-dessus de la vue Web.
top, bottom, leftet right fixez les chargeurs à un bord sûr-aware.
chrome l'application utilise un barre haut native de largeur totale 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 native-plugin ou split-view.

Utilisez interactionMode: 'passThrough' lorsque les utilisateurs peuvent continuer à interagir avec la Vue Web 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-chargement natif pour planifier le comportement des médias et de l'interface native, connectez-l’avec Getting Started pour les détails d'implémentation @capgo/capacitor-navigation native pour le rendu natif de Chrome et WebView. @capgo/capacitor-transitions pour le mouvement des routes Web, et Utilisation de @capgo/capacitor-chargement natif pour le tutoriel