ngx-spinner
A library with more than 50 different loading spinners for Angular 4/5/6/7/8/9/10. (https://napster2210.github.io/ngx-spinner/)
Last updated 3 months ago by geek2210 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ngx-spinner 
SYNC missed versions from official npm registry.

A library with more than 50 different loading spinners for Angular 4/5/6/7/8/9/10. (https://napster2210.github.io/ngx-spinner/)

NgxSpinner

Support Support Support Support Support Support Support License devDependency Status Gitter

What's New

  • Angular 10 support ????????????????
  • Latest Angular Dependencies
  • ng add command to add ngx-spinner to the project
  • Bug Fixes

Use appropriate version based on your Angular version.

Angular 4 Angular 5 Angular 6/7 Angular 8 Angular 9 Angular 10
>= v1.2.0 >= v2.0.0 v7.2.0 v8.1.0 >=v9.0.1 >=v10.0.1

Table of contents

Browser Support

Chrome
Chrome
Firefox
Firefox
IE / Edge
IE / Edge
iOS Safari
Safari
Opera
Opera
Latest ✔ Latest ✔ IE11, Edge ✔ Latest ✔ Latest ✔

Features

  • Angular 10 Support
  • Custom spinner image support(gif), you can pass img tag
  • Multiple Spinners
  • Configurable option through service
  • Fullscreen Mode(Enable/Disable)
  • show()/hide() methods return promise
  • Dynamic z-index
  • Smooth animation while hide/show the spinner
  • New updated DEMO website

Demo

Working Demo

StackBlitz Demo

Installation

ngx-spinner is available via npm and yarn

Using npm:

$ npm install ngx-spinner --save

Using yarn:

$ yarn add ngx-spinner

Using angular-cli:

$ ng add ngx-spinner

Usage

Import NgxSpinnerModule in in the root module(AppModule):

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
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

Methods

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

Available Options

  • [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
  • [fullScreen]: true or false To enable/disable fullscreen mode(overlay), default true
  • [name]: For multiple spinners To set name for spinner, default primary
  • [zIndex]: For dynamic z-index To set z-index for the spinner, default 99999
  • [template]: For custom spinner image To set custom template for the custom spinner, default null

Using Spinner Type

<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>

Using Custom Spinner

<ngx-spinner
  bdColor="rgba(0, 0, 0, 1)">
  template="<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />" 
</ngx-spinner>

NOTE

  • You can pass HTML code as loading text now, instead of input parameter(loadingText). Check above code for reference.
  • If you want multiple ngx-spinner instance, just add name attribute with ngx-spinner component. But in this case, you've to pass that particular name of a spinner in show/hide method. Check Demo
  • You can also change the options/configuration of spinner through service now.
this.spinner.show("mySpinner", {
  type: "line-scale-party",
  size: "large",
  bdColor: "rgba(0, 0, 0, 1)",
  color: "white",
  template: "<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"
});

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

Useful Tips

  • Make sure you've added CUSTOM_ELEMENTS_SCHEMA as your schema in your main module.
  • If you use multiple show() methods in a single component or single function one after another then wrap the show() method within setTimeout() method to avoid any rendering issue.
  • When you want to use spinner inside any container(fullScreen: false), in that case your parent element of spinner must have position: relative; style property.
  • You can't set custom template through service options, it's a limitation by Angular itself.

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
  • Smaller bundle

Ask Me

  • Now you can directly send me a message on Gitter for any query/suggestion/updates

Credits

Inspired by Load Awesome by Daniel Cardoso.

Thanks Alex Vieira Alencar for helping me with Multiple Spinner Support.

License

ngx-spinner is MIT licensed.

Current Tags

  • 10.0.1                                ...           latest (3 months ago)

43 Versions

  • 10.0.1                                ...           3 months ago
  • 10.0.0                                ...           3 months ago
  • 9.0.2                                ...           7 months ago
  • 9.0.1                                ...           7 months ago
  • 9.0.0                                ...           8 months ago
  • 8.1.0                                ...           10 months ago
  • 8.0.3                                ...           a year ago
  • 7.2.0                                ...           a year ago
  • 8.0.2                                ...           a year ago
  • 8.0.1                                ...           a year ago
  • 8.0.0                                ...           a year ago
  • 7.1.4                                ...           2 years ago
  • 7.1.3                                ...           2 years ago
  • 7.1.2                                ...           2 years ago
  • 7.1.1                                ...           2 years ago
  • 7.1.0                                ...           2 years ago
  • 7.0.0                                ...           2 years ago
  • 6.1.2                                ...           2 years ago
  • 6.1.1                                ...           2 years ago
  • 6.1.0                                ...           2 years ago
  • 6.0.0                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 23
This Week 23
This Month 1,217
Last Day 27
Last Week 322
Last Month 1,629
Dependencies (1)
Dev Dependencies (0)
None
Dependents (264)

Copyright 2014 - 2017 © taobao.org |