Composants de chargement

Ajoutez un indicateur de chargement à votre application, retrouvez ici des barres de progression, des spinners, des barres de chargement ou encore des squelettes prêts à l'emploi pour afficher un feedback clair et un beau spinner lors des différentes tâches asynchrones comme les requêtes http ou lors d'une tâche gourmande en cpu...

• ngneat/loadoff est une librairie de l'écosystème open source Ngneat crée par Netanel Basal. Cette librairie loadoff est très complète, elle offre des fonctionnalités utiles pour tous les différents types de besoin de gestion du cycle de chargement d'une application Angular. Par exemple la création de plusieurs loadeurs au sein du meme écran, la création d’un AsyncState pour avoir les différents état d’une requette http, la création d’un SyncState et aussi divers fonctions utilitaires pour travailler avec ces différents outils. ngneat/loadoff
• zak-c/ngx-loading est une petite librairie qui contient un seul composant de loading appelé ngx-loading toutefois les options de customisation sont nombreuses, il est possible de passer son propre template ou alors de configurer le template existant via un input d’option, par exemple le backdrop, l’animation ou les couleurs. zak-c/ngx-loading
• t-ho/ngx-ui-loader est un spinner personnalisable pour votre application Angular, il supporte des template customisés, plusieurs spinners, un flou et gel de l’écran mais aussi un module pour afficher le spinner lors du chargement des pages et un autre module pour afficher le spinner lors d’une requête http. t-ho/ngx-ui-loader
• kuuurt13/ng-block-ui est un composant Angular appelé block-ui qui permet comme son nom l’indique d’afficher un écran de chargement bloquant afin d’éviter que l’utilisateur exécute d’autres fonctionnalités de l’application lorsque celle-ci est entrain d’effectuer une tache asynchrone. kuuurt13/ng-block-ui
• napster2210/ngx-spinner est un composant de spinner avec plus de cinquante types de chargement intégré provenant d’une autre librairie appellée load-awesome. Il est également possible d’utiliser son propre template, par exemple un gif, ou svg. Il offre une large compatibilité avec toutes les versions depuis Angular 4. napster2210/ngx-spinner
• tiberiuzuld/angular-busy est une autre librairie qui permet d’afficher sur n'importe quel élément de votre page un indicateur d'occupation connecté à une promesse ou observable, lui aussi est customisable, il est possible de passer son propre template ou bien d’utiliser les options existantes, message, classe css, backdrop... tiberiuzuld/angular-busy
• pjlamb12/angular-loaders est un composant de chargement très simple qui offre une configuration très minimaliste avec les options classique mais essentielle comme la couverture du container parent, la couleur et le type d’animation. pjlamb12/angular-loaders
• maximelafarie/ngx-smart-loader est une autre composant de loader prêt à l’emploi pour votre projet Angular, il simplifie la gestion du chargement, surtout si vous souhaitez gérer plusieurs chargeurs en même temps. Il offre une API simple, il ne contient aucune librairie CSS mais il est possible d’intégrer votre propre UI de chargement via la technique de projection de Angular. maximelafarie/ngx-smart-loader
• aitboudad/ngx-loading-bar est probablement la librairie la plus connue et la plus modulable des barres de chargement en Angular. La librairie est découpée en trois modules qui permettent de combiner suivant votre besoin : le cœur avec le composant UI de barre de chargement customisable. Les autres modules permettent d’afficher la barre de chargement lors de la navigation entre les routes et pour finir d’affichez la progression de vos requêtes http. aitboudad/ngx-loading-bar
• bootsoon/ng-circle-progress est un composant simple de progression en forme de cercle créé pour Angular basé sur un design léger et scalable au format SVG, il offre de nombreuses options de customisation des couleurs,de la tailles du composant et tu texte de progression. bootsoon/ng-circle-progress
• akserg/ng2-slim-loading-bar est un ancien composant Angular2 non maintenu qui affiche une barre de chargement mince en haut de la page de votre application. Cette librairie est non maintenu mais nous la listons a titre éducatif. akserg/ng2-slim-loading-bar
• jsdaddy/ngx-loader-indicator est une directive que vous pouvez ajouter à un composant Angular existant ou à une balise html simple et ainsi le chargement y sera intégré. Grâce à cette approche, vous n'avez pas besoin de composant supplémentaire pour votre barre de chargement. Bien sûr, le design visuel est personnalisable à l'aide du paramètre options du module. jsdaddy/ngx-loader-indicator
• murhafsousli/ngx-progressbar est un autre composant très célèbre pour donner un retour de la progression à l'utilisateur. Décrit comme une barre de progression nanoscopique, il fournit une animation réaliste pour convaincre vos utilisateurs que quelque chose se passe ! Il fournit également deux modules optionnels pour afficher automatiquement la barre de progression lors des requêtes http et lors de la navigation via le routeur. murhafsousli/ngx-progressbar
• hackafro/angular-epic-spinners est une bibliothèque qui fournit un ensemble de composants Angular prêts à l'emploi pour les spinners épiques. Nous apprécions l'animation visuelle de ces spinners cependant cette librairie n'est plus maintenue donc nous la listons uniquement à des fins pédagogiques. hackafro/angular-epic-spinners
• gbuomprisco/ngx-content-loading est un composant Angular pour créer des squelettes d'interface utilisateur lors du chargement de vos listes. Ce composant fournit différents styles de placeholder de chargement SVG et vous pouvez également définir votre forme personnalisée en SVG. gbuomprisco/ngx-content-loading
• adisreyaj/angular-shimmer-effect est un autre composant de skeleton aussi appelée placeholder avec animation scintillante ou placeholder de contenu. Faites savoir aux utilisateurs que quelque chose est en cours de chargement est bien mais avec le placeholder de contenu vous faites savoir quoi exactement est en cours de chargement. C'est un excellent moyen d'améliorer l'UX de l'application. adisreyaj/angular-shimmer-effect
• willmendesneto/ngx-skeleton-loader est encore autre composant de skeleton mais pas n'importe lequel puisque celui-ci est le plus reconnu et utilisé par la communauté Angular. Ce composant crée par Wilson Mendes permet de customiser le composant suivant votre application : l'apparence, le thème et l'animation... En plus un soin a été pris pour offrir un bon niveau d'accessibilité et il est compatible avec différents types de rendering. willmendesneto/ngx-skeleton-loader