Socket
Socket
Sign inDemoInstall

ngx-spinner

Package Overview
Dependencies
5
Maintainers
1
Versions
57
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    ngx-spinner

[![ng5](https://img.shields.io/travis/rust-lang/rust.svg?style=flat-square)]() [![Support](https://img.shields.io/badge/Support-Angular%202%2B-brightgreen.svg?style=flat-square)]() [![License](https://img.shields.io/npm/l/express.svg?style=flat-square)]


Version published
Maintainers
1
Created

Readme

Source

ngx-spinner

A library for spinner specifically for Angular 2/4/5.

ng5 Support License devDependency Status

Table of contents

Browser Support

ChromeFirefoxIESafariOpera
Latest ✔Latest ✔10+ ✔Latest ✔Latest ✔

Demo

Workig Demo: Plunkr 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 Plunkr Demo

NgxSpinner Service

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

NgxSpinner Component

<ngx-spinner [bdOpacity]="0.9" [bdColor]="#909090" [size]="medium" [color]="#fff"></ngx-spinner>
  • [bdOpacity]: between 0.0 to 1.0. To set opacity of backdrop, default 0.8
  • [bdColor]: Any css color format. To set background-color for backdrop, default #333
  • [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

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

  • Stable version v1.0.0 (Coming soon)
  • More than 50 different types of spinner (Coming soon)
  • Interceptor Implementation (Coming soon)
  • Github page with working example

License

The MIT License (MIT)

Keywords

FAQs

Last updated on 04 Dec 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc