Add more spinners and background is showed after foreground is closed out

Author: t-ho

README.md

@@ -11,7 +11,7 @@ An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ ar
 
 Available spinners:
 
-[![ngx-ui-loader-spinners](https://j.gifs.com/L8VWkp.gif)](https://ngx-ui-loader-demo.stackblitz.io/spinners)
+[![ngx-ui-loader-spinners](https://j.gifs.com/G5VxP7.gif)](https://ngx-ui-loader-demo.stackblitz.io/spinners)
 
 ### Features
 
@@ -22,13 +22,30 @@ Available spinners:
 * Be able to change color and size of logo, spinners and progress bar
 * Be able to change the direction of progress bar
 
-## Demo
+## Table Of Contents
+- [Demo](#demo)
+- [Installation](#installation)
+- [Getting Started](#getting_started)
+- [Usage](#usage)
+- [API - NgxUiLoaderService](#api_service)
+- [Custom Configuration](#configuration)
+- [Input options](#input_options)
+- [Automatically show loader for router events](#router_events)
+- [Changelog](#changelog)
+- [Credits](#credits)
+- [License](#license)
+
+
+<a name="demo"></a>
+
+## Demo <a name="demo"></a>
 
 Live demo [here](https://ngx-ui-loader-demo.stackblitz.io).
 
 Play with **ngx-ui-loader** [here](https://stackblitz.com/edit/ngx-ui-loader-demo) on stackblitz.
 
-## Installation
+
+## Installation <a name="installation"></a>
 
 Install `ngx-ui-loader` via NPM, using the command below.
 
@@ -37,7 +54,11 @@ Install `ngx-ui-loader` via NPM, using the command below.
 ```shell
 npm install --save ngx-ui-loader
 ```
-## Getting started
+
+
+<a name="getting_started"></a>
+
+## Getting started <a name="getting_started"></a>
 
 Import the `NgxUiLoaderModule` in your root application module `AppModule`:
 
@@ -66,7 +87,10 @@ export class AppModule { }
 
 ```
 
-## Usage
+
+<a name="usage"></a>
+
+## Usage <a name="usage"></a>
 
 After importing the `NgxUiLoaderModule`, use `ngx-ui-loader` component in your root app template:
 
@@ -107,7 +131,9 @@ export class AppComponent implements OnInit {
 
 ```
 
-## NgxUiLoaderService service
+<a name="api_service"></a>
+
+## API - NgxUiLoaderService <a name="api_service"></a>
 
 * `NgxUiLoaderService.start([id]='default')` Starts a foreground loader with progress bar. Users cannot interact with the page when the loader is showed.
 * `NgxUiLoaderService.stop([id]='default')` Stops a foreground loader with progress bar.
@@ -117,7 +143,10 @@ export class AppComponent implements OnInit {
 * `NgxUiLoaderService.getStatus()` Returns an object including `waitingForeground` and `waitingBackground` properties.
 * `NgxUiLoaderService.stopAll()` Stops all foreground and background loaders.
 
-## Configuration
+
+<a name="configuration"></a>
+
+## Custom Configuration <a name="configuration"></a>
 
 You can configure `ngx-ui-loader` in the template as below:
 
@@ -162,7 +191,9 @@ export class AppModule { }
 
 ```
 
-## Input Options
+<a name="input_options"></a>
+
+## Input Options <a name="input_options"></a>
 
 |   Attribute      |  Type     | Required |     Default        |                                       Description                                               |
 | ---------------- | --------- | -------- | ------------------ | ----------------------------------------------------------------------------------------------- |
@@ -193,7 +224,10 @@ export class AppModule { }
 | `overlayColor`   | *string*  | optional | `rgba(40,40,40,.8)`| Overlay background color                                                                        |
 | `threshold`      | *number*  | optional | `500`              | The time a loader must be showed at least before it can be stopped. It must be >= 1 millisecond. **NOTE: `threshold` is only configured via forRoot() method.**||
 
-## Automatically show loader for router events
+
+<a name="router_events"></a>
+
+## Automatically show loader for router events <a name="router_events"></a>
 
 If you want the loader to start automatically for navigating between your app routes:
 
@@ -230,7 +264,14 @@ NOTE: And in you root app template, do not forget to include `ngx-ui-loader` com
 <ngx-ui-loader></ngx-ui-loader>
 ```
 
-## Changelog
+
+<a name="changelog"></a>
+
+## Changelog <a name="changelog"></a>
+
+### v.1.1.2
+* Add more spinner types (total 22 spinners)
+* Bugs fixed: Background spinner (if active) should be showed after the foreground spinner is closed out.
 
 ### v.1.1.1
 * Bugs fixed
@@ -264,13 +305,19 @@ NOTE: And in you root app template, do not forget to include `ngx-ui-loader` com
 * Be able to change color and size of spinners and progress bar
 * Be able to change the direction of progress bar
 
-## Credits
+
+<a name="credits"></a>
+
+## Credits <a name="credits"></a>
 
 * Tobias Ahlin - [CSS spinkit](https://github.com/tobiasahlin/SpinKit)
 * Daniel Cardoso - [Load awesome](https://github.com/danielcardoso/load-awesome)
 * Matt Carter - AngularJS `angular-ui-loader`
 
-## License
+
+<a name="license"></a>
+
+## License <a name="license"></a>
 
 MIT &copy; [t-ho](mailto:toan.hmt@gmail.com)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-ui-loader-app",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/ngx-ui-loader/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-ui-loader",
   "description": "An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ are tested) applications. It supports foreground, background spinner/loader and indicative progress bar.",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/t-ho/ngx-ui-loader.git"

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-helper.service.ts

@@ -27,6 +27,10 @@ export class NgxUiLoaderHelperService {
   foregroundClosing: Observable<boolean>;
   backgroundClosing: Observable<boolean>;
 
+  /**
+   * Constructor
+   * @param config
+   */
   constructor(@Optional() @Inject(NGX_UI_LOADER_CONFIG_TOKEN) private config: NgxUiLoaderConfig) {
 
     this.validSpinnerTypes = Object.keys(SPINNER_TYPES).map(key => SPINNER_TYPES[key]);
@@ -78,15 +82,15 @@ export class NgxUiLoaderHelperService {
 
   /**
    * Get default loader configuration
-   * @return default configuration object
+   * @returns default configuration object
    */
   getDefaultConfig(): NgxUiLoaderConfig {
     return Object.assign({}, this.defaultConfig);
   }
 
   /**
    * Get current status
-   * @return An object with waiting foreground and background properties
+   * @returns An object with waiting foreground and background properties
    */
   getStatus() {
     return {
@@ -97,23 +101,23 @@ export class NgxUiLoaderHelperService {
 
   /**
    * Determine whether the loader is active
-   * @return true if the loader is active
+   * @returns true if the loader is active
    */
   private isActive() {
     return Object.keys(this.waitingForeground).length > 0 || Object.keys(this.waitingBackground).length > 0;
   }
 
   /**
    * Check whether the queue has any waiting foreground loader
-   * @return true if at least one waiting foreground loader exists
+   * @returns true if at least one waiting foreground loader exists
    */
   private hasForeground() {
     return Object.keys(this.waitingForeground).length > 0;
   }
 
   /**
    * Check whether the queue has any waiting background loader
-   * @return true if at least one waiting background loader exists
+   * @returns true if at least one waiting background loader exists
    */
   private hasBackground() {
     return Object.keys(this.waitingBackground).length > 0;
@@ -153,7 +157,7 @@ export class NgxUiLoaderHelperService {
   /**
    * Stop a foreground loading with specific id
    * @param id the optional id to stop. If not provided, 'default' is used.
-   * @return
+   * @returns Object
    */
   stop(id?: string): Object {
     const now = Date.now();
@@ -180,15 +184,18 @@ export class NgxUiLoaderHelperService {
     if (!this.hasForeground()) {
       this.foregroundCloseout();
       this._showForeground.next(false);
-      this._showBackground.next(true);
+      // Show background spinner after the foreground is closed out
+      setTimeout(() => {
+        this._showBackground.next(true);
+      }, 500);
     }
     return { id: id, isForeground: true, isSuccess: true, stopAll: false };
   }
 
   /**
    * Stop a background loading with specific id
    * @param id the optional id to stop. If not provided, 'default' is used.
-   * @return
+   * @returns Object
    */
   stopBackground(id?: string): Object {
     const now = Date.now();
@@ -220,7 +227,7 @@ export class NgxUiLoaderHelperService {
    * @param inputName The name of the input property
    * @param value The spinner type to verify
    * @param defaultValue The default spinner type
-   * @return a valid spinner type
+   * @returns a valid spinner type
    */
   validateSpinnerType(inputName: string, value: string, defaultValue: string) {
     return this.validate(this.validSpinnerTypes, inputName, value, defaultValue);
@@ -231,7 +238,7 @@ export class NgxUiLoaderHelperService {
    * @param inputName The name of the input property
    * @param value The position value to verify
    * @param defaultValue the default position
-   * @return a valid position
+   * @returns a valid position
    */
   validatePosition(inputName: string, value: string, defaultValue: string) {
     return this.validate(this.validPositions, inputName, value, defaultValue);
@@ -242,7 +249,7 @@ export class NgxUiLoaderHelperService {
    * @param inputName the name of the input property
    * @param value the direction to verify
    * @param defaultValue the default direction
-   * @return a valid direction
+   * @returns a valid direction
    */
   validateDirection(inputName: string, value: string, defaultValue: string) {
     return this.validate(this.validDirections, inputName, value, defaultValue);