|
| 1 | +[](https://badge.fury.io/js/ngx-ui-loader) |
| 2 | +[](https://stackblitz.com/edit/ngx-ui-loader) |
| 3 | +[](https://travis-ci.org/t-ho/ngx-ui-loader) |
| 4 | +[](https://codecov.io/gh/t-ho/ngx-ui-loader) |
| 5 | +[](https://www.npmjs.com/package/ngx-ui-loader) |
| 6 | +[](https://www.jsdelivr.com/package/npm/ngx-ui-loader) |
| 7 | +[](https://bundlephobia.com/result?p=ngx-ui-loader) |
| 8 | +[](https://github.com/t-ho/ngx-ui-loader/wiki/License) |
| 9 | + |
| 10 | +# ngx-ui-loader |
| 11 | + |
| 12 | +An all-in-one and fully customizable loader/spinner for Angular 5, 6 and 7+ applications. It supports foreground, background spinner/loader, indicative progress bar and multiple loaders. |
| 13 | + |
| 14 | +[](https://ngx-ui-loader.stackblitz.io/multiloader) |
| 15 | + |
| 16 | +Available spinners: |
| 17 | + |
| 18 | +[](https://ngx-ui-loader.stackblitz.io/spinners) |
| 19 | + |
| 20 | +## Features |
| 21 | +* Support **multiple loaders ** (>= [email protected]). See [Multiple loaders ](https://github.com/t-ho/ngx-ui-loader/wiki/Getting-started#24-multiple-loaders) for more details and [demo here ](https://ngx-ui-loader.stackblitz.io/multiloader) |
| 22 | +* Show foreground loader with **progress bar** |
| 23 | +* The page content can be **blurred/frosted** while showing foreground loader. See [NgxUiLoaderBlurred](https://github.com/t-ho/ngx-ui-loader/wiki/NgxUiLoaderBlurred-directive) directive for more details |
| 24 | +* Show loader with different id for different tasks |
| 25 | +* Be able to add **logo** and **loading text** |
| 26 | +* Be able to change position of spinners, logo and loading text |
| 27 | +* Be able to change color and size of logo, spinners and progress bar |
| 28 | +* Be able to change the direction of progress bar |
| 29 | +* Automatically show loader for router events. See [NgxUiLoaderRouterModule](https://github.com/t-ho/ngx-ui-loader/wiki/Automatically-show-loader-for-router-events) for more details |
| 30 | +* Automatically show loader for http requests. See [NgxUiLoaderHttpModule](https://github.com/t-ho/ngx-ui-loader/wiki/Automatically-show-loader-for-Http-requests) for more details |
| 31 | + |
| 32 | +## The full documentation is available at the [wiki page](https://github.com/t-ho/ngx-ui-loader/wiki) |
| 33 | + |
| 34 | +## Demo |
| 35 | + |
| 36 | +Live demo [here](https://ngx-ui-loader.stackblitz.io). |
| 37 | + |
| 38 | +Multiple loaders demo [here](https://ngx-ui-loader.stackblitz.io/multiloader). |
| 39 | + |
| 40 | +Live demo source code [here](https://stackblitz.com/edit/ngx-ui-loader) on Stackblitz. |
| 41 | + |
| 42 | +## Installation |
| 43 | + |
| 44 | +Install `ngx-ui-loader` via NPM, using the command below. |
| 45 | + |
| 46 | +### NPM |
| 47 | + |
| 48 | +```shell |
| 49 | +$ npm install --save ngx-ui-loader |
| 50 | +``` |
| 51 | + |
| 52 | +### Or Yarn |
| 53 | + |
| 54 | +```shell |
| 55 | +$ yarn add ngx-ui-loader |
| 56 | +``` |
| 57 | + |
| 58 | +*Please read [wiki page](https://github.com/t-ho/ngx-ui-loader/wiki) for more instructions* |
| 59 | + |
| 60 | +### * For Angular 4 and 5, please use ngx-ui-loader version 1.2.x |
| 61 | + |
| 62 | +```shell |
| 63 | +$ npm install --save [email protected] |
| 64 | +``` |
| 65 | + |
| 66 | +*The documentation for **v1.2.x** is available [here](https://github.com/t-ho/ngx-ui-loader/blob/v1.x.x/README.md)* |
| 67 | + |
| 68 | +### If you like `ngx-ui-loader`, please give it a :star: |
0 commit comments