ngx-bootstrap-spinner

A library with bootstrap spinners for or Angular 4/5/6/7/8/9/10.(https://sonce.github.io/ngx-bootstrap-spinner/).
It is change by npx-spnner. (https://github.com/Napster2210/ngx-spinner/).Thanks!

NgxBootstrapSpinner

What's New

• change to Bootstrap Spinners
• Angular 10 support 🥳🥳🥳🥳
• Latest Angular Dependencies
• ng add command to add ngx-bootstrap-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

• What's New
• Table of contents
• Browser Support
• Features
• Demo
• Installation
• Usage
• Methods
• Available Options
  • Using Spinner Type
  • Using Custom Spinner
  • NOTE
• Useful Tips
• Versioning
• Creator
  • Zack
• Credits
  • License

Browser Support

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

Features

• Angular 10 Support
• Custom spinner image support(gif), you can pass img tag
• Bootstrap 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

Installation

ngx-bootstrap-spinner is available via npm and yarn

Using npm:

$ npm install ngx-bootstrap-spinner --save

Using yarn:

$ yarn add ngx-bootstrap-spinner

Using angular-cli:

$ ng add ngx-bootstrap-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-bootstrap-spinner";

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

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

import { NgxSpinnerService } from "ngx-bootstrap-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-bootstrap-spinner></ngx-bootstrap-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. To set size of spinner, default default
• [color]: Any css color format. To set color of spinner, default #fff
• [type]: Bootstrap spinner:border,grow.see (https://getbootstrap.com/docs/4.4/components/spinners/). To set type of spinner, default border
• [isButtonSpinner]:show loader in button.see(https://getbootstrap.com/docs/4.4/components/spinners/#buttons).
• [autoDisableButton]:when isButtonSpinner is true.and spinner is shown,the own button disabled will set to true.
• [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
• [loaderTemplate]: For custom spinner image To set custom template for the custom spinner, default null
• [loadingText]:Loading text.default:Loading...
• [loadingTextTemplate]:For custom loading text

Using Spinner Type

<ngx-bootstrap-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="default"
  color="#fff"
  type="border"
>
</ngx-bootstrap-spinner>

Using Custom Spinner

<ngx-bootstrap-spinner
  bdColor="rgba(0, 0, 0, 1)">
  loaderTemplate="<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"
</ngx-bootstrap-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-bootstrap-spinner instance, just add name attribute with ngx-bootstrap-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: "border",
  size: "default",
  bdColor: "rgba(0, 0, 0, 1)",
  color: "white",
  loaderTemplate: "<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"
});

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

Zack

• @GitHub

Credits

Inspired by Load Awesome by Daniel Cardoso.

License

ngx-bootstrap-spinner is MIT licensed.