Have ideas to improve npm?Join in the discussion! »

    ngx-bootstrap-spinner
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.5 • Public • Published

    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

    Support Support Support Support Support Support Support License devDependency Status

    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

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

    Credits

    Inspired by Load Awesome by Daniel Cardoso.

    License

    ngx-bootstrap-spinner is MIT licensed.

    Install

    npm i ngx-bootstrap-spinner

    DownloadsWeekly Downloads

    235

    Version

    10.0.5

    License

    MIT

    Unpacked Size

    140 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar