Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

ngx-spinner

6.1.2 • Public • Published

NgxSpinner

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

ng5 Support Support Support License devDependency Status

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

Table of contents

Browser Support

Chrome Firefox IE Safari Opera
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

Future Plan

  • Interceptor Implementation (Coming soon)
  • Multiple Spinner Support
  • Configurable option using service

Credits

Inspired by Load Awesome by Daniel Cardoso.

License

The MIT License (MIT)

install

npm i ngx-spinner

Downloadsweekly downloads

13,517

version

6.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability