Loader components

Add a loading indicator to your application, find here ready to use progress bars, spinners, loading bars or even skeletons for displaying a clear feedback and beautiful loader during the different async tasks like http requests or during a cpu-heavy task...

• ngneat/loadoff is a library from the Ngneat open source ecosystem created by Netanel Basal. This loadoff library is very complete, it offers useful functionalities for all the different types of needs for managing the loading cycle of an Angular application. For example the creation of several loaders within the same screen, the creation of an AsyncState to have the different states of an http request, the creation of a SyncState and also various utility functions to work with these different tools. ngneat/loadoff
• zak-c/ngx-loading is a small library that contains a single loading component called ngx-loading however the customization options are numerous, it is possible to pass your own template or to configure the existing template via an input option, for example the backdrop, animation or colors. zak-c/ngx-loading
• t-ho/ngx-ui-loader is a customizable spinner for the Angular application, it supports custom templates, multiple spinners, screen blur and freeze but also a module to display the spinner when loading pages and another module to display the spinner when executing an http request. t-ho/ngx-ui-loader
• kuuurt13/ng-block-ui is an Angular component called block-ui which allows, as its name suggests, to display a blocking loading screen in order to prevent the user from executing other application functionalities when it is performing an asynchronous task. kuuurt13/ng-block-ui
• napster2210/ngx-spinner is a spinner component with more than fifty built-in load types from another library called load-awesome. It is also possible to use your own template, for example a gif, or svg. It offers wide compatibility with all versions since Angular 4. napster2210/ngx-spinner
• tiberiuzuld/angular-busy is another library that allows you to display on any element of your page an occupancy indicator connected to a promise or observable, it too is customizable, it is possible to pass your own template or to use the options existing, message, css class, backdrop... tiberiuzuld/angular-busy
• pjlamb12/angular-loaders is a very simple loading component that offers a very minimalist configuration with the classic but essential options such as the cover of the parent container, the color and the type of animation. pjlamb12/angular-loaders
• maximelafarie/ngx-smart-loader is another ready-to-use loader component for your Angular project, it simplifies load management, especially if you want to manage multiple loaders at the same time. It offers a simple API, it does not contain any CSS library but it is possible to integrate your own loading UI via Angular's projection technique. maximelafarie/ngx-smart-loader
• aitboudad/ngx-loading-bar is probably the best known and most modular library of loading bars in Angular. The library is divided into three modules that allow you to combine according to your needs: the core with the customizable loading bar UI component. The other modules allow you to display the loading bar when navigating between routes and finally display the progress of your http requests. aitboudad/ngx-loading-bar
• bootsoon/ng-circle-progress is a simple circle-shaped progress component created for Angular based on a lightweight and scalable design in SVG format, it offers many customization options for colors, component sizes and progress text. bootsoon/ng-circle-progress
• akserg/ng2-slim-loading-bar is an old, unmaintained Angular2 component that displays a thin loading bar at the top of your application page. This library is not maintained but we list it for educational purposes. akserg/ng2-slim-loading-bar
• jsdaddy/ngx-loader-indicator is a directive that you can add to an existing angular component or plain html tag and thus the loader will be integrated into it. Thanks to this approach you don't need additional component for the loading bar. Of course the visual design is customizable using the options parameter of the module. jsdaddy/ngx-loader-indicator
• murhafsousli/ngx-progressbar is another very famous component to give feedback of the progression to the user. Described as nanoscopic progress bar, it provides a realistic trickle animation to convince your users that something is happening! It also provides two optional modules to automatically display the progress bar during http requests and when browsing via the router.murhafsousli/ngx-progressbar
• hackafro/angular-epic-spinners is a library that provides a set of ready-to-use Angular components for epic spinners. We appreciate the visual animation of these spinners however this library is no longer maintained so we are listing it for educational purposes only. hackafro/angular-epic-spinners
• gbuomprisco/ngx-content-loading is an Angular component to create UI skeletons when loading your lists. This component provides differents styles of SVG loading placeholders and you can also define your custom shape in SVG. gbuomprisco/ngx-content-loading
• adisreyaj/angular-shimmer-effect is another component of skeleton also called placeholder with shimmer animation or content placeholder. Letting users know something is loading is fine but with the content placeholder you let people know what exactly is loading. It's a great way to improve the UX of the app. adisreyaj/angular-shimmer-effect
• willmendesneto/ngx-skeleton-loader is yet another component of skeleton but not just any since it is the most recognized and used by the Angular community. This component created by Wilson Mendes allows you to customize the component according to your application: appearance, theme and animation... In addition, care has been taken to offer a good level of accessibility and it is compatible with different rendering types. willmendesneto/ngx-skeleton-loader