@capgo/capacitor-chargement natif

Rendre des chargeurs poli au-dessus, au-dessous, autour ou au lieu de la vue WebView en utilisant des vues natives iOS et Android.

Commencer GitHub

Chemins de rendu natif

Affichez les chargeurs sous forme de vues de surcouche UIKit et Android au lieu de demander au navigateur Web de faire 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, des chargeurs de bord Siri v2, des barres de progression Chrome en haut, des orbites, des anneaux, des impulsions, des points, des barres, des vagues, des halos, des images ou des chargeurs basés sur Lottie.

Tout cela est appelable.

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 Cela est destiné aux états de chargement qui doivent rester lisses, translucides et natifs tandis que la vue Web est occupée, se redimensionne, navigue ou est 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 en haut qui peuvent redimensionner la vue Web au lieu de recouvrir le contenu
Des chargeurs de bord à l'avant, en arrière, à 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
Lottie, image embarquée ou animation chargée à partir d'un élément distant

Styles de démonstration

Style	Aperçu
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éterministe.
hide(options) supprime un chargeur.
hideAll(options) supprime tous les chargeurs.
setWebViewLayout(options) redimensionne ou insère la vue Web ou le corps pour que les chargeurs natifs puissent s'y trouver à côté.
resetWebViewLayout(options?) restaure la disposition d'origine de la vue Web ou du corps.
getState() renvoie les identifiants des chargeurs actuellement visibles.
configure(options) fixe le style par défaut, la disposition, les couleurs, la motion et le comportement.

Modèle de placement

placement détermine où apparaît la surface native :

fullscreen couvre toute l'application, facultativement translucide.
center fait flotter un chargeur compact sur la vue WebView.
top, bottom, left, et right fixe les chargeurs à un bord conforme à la zone sécurisée.
chrome le style utilise une barre native de haut plein large et s'associe bien à 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 la charge doit empêcher les touches, ou loaderOnly lorsque seulement la surface de 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-l’avec Getting Started pour les détails d'implémentation, @capgo/capacitor-native-navigation pour la disposition de chrome et WebView natives, @capgo/capacitor-transitions pour les routes web de mouvement, et En utilisant @capgo/capacitor-chargement natif pour le tutoriel.