https://github.com/t-ho/ngx-ui-loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
https://github.com/t-ho/ngx-ui-loader
angular loader loading multiple-loaders ngx-loader ngx-loading ngx-progress-bar ngx-ui-loader ngxloader ngxuiloader progress-bar spin-kit spinner
Last synced: 6 days ago
JSON representation
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
- Host: GitHub
- URL: https://github.com/t-ho/ngx-ui-loader
- Owner: t-ho
- License: mit
- Created: 2018-05-18T04:12:10.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T15:43:02.000Z (about 2 years ago)
- Last Synced: 2025-05-07T08:02:10.355Z (15 days ago)
- Topics: angular, loader, loading, multiple-loaders, ngx-loader, ngx-loading, ngx-progress-bar, ngx-ui-loader, ngxloader, ngxuiloader, progress-bar, spin-kit, spinner
- Language: TypeScript
- Homepage: https://tdev.app/ngx-ui-loader/demo
- Size: 13 MB
- Stars: 433
- Watchers: 10
- Forks: 42
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ngx-ui-loader)
[](https://github.com/t-ho/ngx-ui-loader/stargazers)
[](https://stackblitz.com/edit/ngx-ui-loader)
[](https://github.com/t-ho/ngx-ui-loader/actions)
[](https://codecov.io/gh/t-ho/ngx-ui-loader)
[](https://www.npmjs.com/package/ngx-ui-loader)
[](https://github.com/prettier/prettier)
[](https://bundlephobia.com/result?p=ngx-ui-loader)
[](https://github.com/t-ho/ngx-ui-loader/wiki/License)
# ngx-ui-loader
An all-in-one and fully customizable loader/spinner for Angular applications. It supports foreground, background spinner/loader, indicative progress bar and multiple loaders.
[](https://tdev.app/ngx-ui-loader/demo)
## Features
- Support [custom template](https://tdev.app/ngx-ui-loader#custom-template) (>= [email protected]).
- Support [multiple loaders](https://tdev.app/ngx-ui-loader#multiple-loaders) (>= [email protected]).
- Show foreground loader with **progress bar**
- The page content can be **blurred/frosted** while showing foreground loader. See [NgxUiLoaderBlurred](https://tdev.app/ngx-ui-loader#ngxuiloaderblurred-directive) directive for more details
- Automatically show loader for router events. See [NgxUiLoaderRouterModule](https://tdev.app/ngx-ui-loader#automatically-show-loader-for-router-events) for more details
- Automatically show loader for http requests. See [NgxUiLoaderHttpModule](https://tdev.app/ngx-ui-loader#automatically-show-loader-for-http-requests) for more details
### See full documentation [here](https://tdev.app/ngx-ui-loader)
## Demo
Live demo [here](https://tdev.app/ngx-ui-loader/demo).
## Installation
Install `ngx-ui-loader` via NPM, using the command below.
```shell
$ npm install --save ngx-ui-loader
# Or Yarn
$ yarn add ngx-ui-loader
```
| Angular | Installation | Documentation |
| ------------- | ----------------------------------- | --------------------------------------------------------------------- |
| Angular 13 | `npm i --save ngx-ui-loader` | [v13.x.x](https://tdev.app/ngx-ui-loader) |
| Angular 11 | `npm i --save [email protected]` | [v11.x.x](https://tdev.app/ngx-ui-loader) |
| Angular 10 | `npm i --save [email protected]` | [v10.x.x](https://tdev.app/ngx-ui-loader) |
| Angular 9 | `npm i --save [email protected]` | [v9.x.x](https://tdev.app/ngx-ui-loader) |
| Angular 8 | `npm i --save [email protected]` | [v8.x.x](https://tdev.app/ngx-ui-loader) |
| Angular 6 & 7 | `npm i --save [email protected]` | [v7.2.x](https://github.com/t-ho/ngx-ui-loader/blob/v7.x.x/README.md) |
| Angular 4 & 5 | `npm i --save [email protected]` | [v1.x.x](https://github.com/t-ho/ngx-ui-loader/blob/v1.x.x/README.md) |
### If you like `ngx-ui-loader`, please give it a :star: