NgxSpinner

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

The version 1.x supports Angular 4. UPDATE: Now works with Angular 4(v1.2.0)

Angular 4	Angular 5	Angular 6
>= `v1.2.0`	>= `v2.0.0`	>= `v6.0.0`

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
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple">
 <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

[bdColor]: RGBA color format. To set background-color for backdrop, default rgba(51,51,51,0.8) where aplha value(0.8) is opacity of backdrop
[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
[type]: Choose any animation spinner from Load Awesome. To set type of spinner, default ball-scale-multiple
Note: You can pass HTML code as loading text now, instead of input parameter(loadingText). Check above code for reference.

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)
Multiple Spinner Support
Configurable option using service

Credits

Inspired by Load Awesome by Daniel Cardoso.

elientumba2019/ngx-spinner