NgxSpinner

A library for loading spinner specifically for Angular 2/4/5. (https://napster2210.github.io/ngx-spinner/)

The version 1.x supports supports Angular >= 5.

Browser Support
Demo
Installation
Usage
Versioning
Creator
Future Plan
Credits
License

Browser Support


Latest ✔	Latest ✔	10+ ✔	Latest ✔	Latest ✔

Demo

Working Demo

Installation

ngx-spinner is available via npm and yarn

Using npm:

$ npm install ngx-spinner --save

Using yarn:

$ yarn add ngx-spinner

Usage

Import NgxSpinnerModule in in the root module(AppModule):

// Import library module
import { NgxSpinnerModule } from 'ngx-spinner';

@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ]
})
export class AppModule { }

Add NgxSpinnerService service wherever you want to use the ngx-spinner.

import { NgxSpinnerService } from 'ngx-spinner';

class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) { }

  ngOnInit() {
    /** spinner starts on init */
    this.spinner.show();

    setTimeout(() => {
        /** spinner ends after 5 seconds */
        this.spinner.hide();
    }, 5000);
  }
}

Now use in your template

<ngx-spinner></ngx-spinner>

See Demo

NgxSpinner Service

NgxSpinnerService.show() Shows the spinner
NgxSpinnerService.hide() Hides the spinner

NgxSpinner Component

<ngx-spinner [bdOpacity]="0.9" [bdColor]="#909090" [size]="medium" [color]="#fff" [loadingText]="Loading..." [type]="ball-scale-multiple"></ngx-spinner>

[bdOpacity]: between 0.0 to 1.0. To set opacity of backdrop, default 0.8
[bdColor]: Any css color format. To set background-color for backdrop, default #333
[size]: Anyone from small, default, medium, large. To set size of spinner, default large
[color]: Any css color format. To set color of spinner, default #fff
[loadingText]: Loading Text. To set loadingText of spinner, default false
[type]: Choose any animation spinner from Load Awesome. To set type of spinner, default ball-scale-multiple

How to use type?

Go to the Load Awesome.
Select any animation, copy name of animation, replace all spaces with hyphen(-) and all letters should be lowercase.
- Let's say if I select "Ball 8bits" animation then type will be ball-8bits.
- For more information you can check it out Demo

Versioning

ngx-spinner will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Yuvraj Chauhan

@GitHub

Future Plan

Interceptor Implementation (Coming soon)
Spinner in specific container(DOM Element)

Credits

Inspired by Load Awesome by Daniel Cardoso.

TakuyaAbe / ngx-spinner