UNPKG

ngx-ui-loader

Version:

An all-in-one and fully customizable loader/spinner for Angular applications. It supports foreground, background spinner/loader, indicative progress bar and multiple loaders.

tdev.app/ngx-ui-loader/demo

t-ho/ngx-ui-loader

61 lines (45 loc) • 4.52 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
[![npm](https://img.shields.io/npm/v/ngx-ui-loader)](https://www.npmjs.com/package/ngx-ui-loader) [![GitHub stars](https://img.shields.io/github/stars/t-ho/ngx-ui-loader?color=00bcd4)](https://github.com/t-ho/ngx-ui-loader/stargazers) [![demo](https://img.shields.io/badge/demo-StackBlitz-blueviolet.svg)](https://stackblitz.com/edit/ngx-ui-loader) [![CI Testing](https://github.com/t-ho/ngx-ui-loader/workflows/CI%20Testing/badge.svg)](https://github.com/t-ho/ngx-ui-loader/actions) [![codecov](https://codecov.io/gh/t-ho/ngx-ui-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/t-ho/ngx-ui-loader) [![npm](https://img.shields.io/npm/dw/ngx-ui-loader.svg)](https://www.npmjs.com/package/ngx-ui-loader) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-ui-loader.svg)](https://bundlephobia.com/result?p=ngx-ui-loader) [![license](https://img.shields.io/npm/l/ngx-ui-loader.svg)](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. [![ngx-ui-loader-demo](https://raw.githubusercontent.com/t-ho/ngx-ui-loader/master/src/assets/multi-loaders.gif)](https://tdev.app/ngx-ui-loader/demo) ## Features - Support [custom template](https://tdev.app/ngx-ui-loader#custom-template) (>= ngx-ui-loader@9.1.0). - Support [multiple loaders](https://tdev.app/ngx-ui-loader#multiple-loaders) (>= ngx-ui-loader@7.1.0). - 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 19 | `npm i --save ngx-ui-loader` | [v19.x.x](https://tdev.app/ngx-ui-loader) | | Angular 18 | `npm i --save ngx-ui-loader@18.0.0` | [v18.x.x](https://tdev.app/ngx-ui-loader) | | Angular 17 | `npm i --save ngx-ui-loader@17.0.0` | [v17.x.x](https://tdev.app/ngx-ui-loader) | | Angular 16 | `npm i --save ngx-ui-loader@16.0.1` | [v16.x.x](https://tdev.app/ngx-ui-loader) | | Angular 15 | `npm i --save ngx-ui-loader@15.0.0` | [v15.x.x](https://tdev.app/ngx-ui-loader) | | Angular 14 | `npm i --save ngx-ui-loader@14.0.0` | [v14.x.x](https://tdev.app/ngx-ui-loader) | | Angular 13 | `npm i --save ngx-ui-loader@13.0.0` | [v13.x.x](https://tdev.app/ngx-ui-loader) | | Angular 11 | `npm i --save ngx-ui-loader@11.0.0` | [v11.x.x](https://tdev.app/ngx-ui-loader) | | Angular 10 | `npm i --save ngx-ui-loader@10.0.0` | [v10.x.x](https://tdev.app/ngx-ui-loader) | | Angular 9 | `npm i --save ngx-ui-loader@9.1.1` | [v9.x.x](https://tdev.app/ngx-ui-loader) | | Angular 8 | `npm i --save ngx-ui-loader@8.0.0` | [v8.x.x](https://tdev.app/ngx-ui-loader) | | Angular 6 & 7 | `npm i --save ngx-ui-loader@7.2.2` | [v7.2.x](https://github.com/t-ho/ngx-ui-loader/blob/v7.x.x/README.md) | | Angular 4 & 5 | `npm i --save ngx-ui-loader@1.2.5` | [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: