Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ngx-spinner
Advanced tools
ngx-spinner - npm Package Compare versions
Comparing version 0.1.4 to 0.1.5
52
index.js
@@ -1,2 +0,2 @@ | ||
| import { Component, Injectable, NgModule } from '@angular/core'; | ||
| import { Component, Injectable, Input, NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
@@ -44,7 +44,13 @@ import { Subject as Subject$1 } from 'rxjs/Subject'; | ||
| var NgxSpinnerComponent = (function () { | ||
| function NgxSpinnerComponent(spinner) { | ||
| function NgxSpinnerComponent(spinnerService) { | ||
| var _this = this; | ||
| this.spinner = spinner; | ||
| this.spinnerService = spinnerService; | ||
| this.bdOpacity = 0.8; | ||
| this.bdColor = '#333'; | ||
| this.size = 'large'; | ||
| this.color = '#fff'; | ||
| this.type = 'ball-scale-multiple'; | ||
| this.showSpinner = false; | ||
| this.spinnerSubscription = this.spinner.spinnerObservable.subscribe(function (flag) { | ||
| this.spinnerClass = this.getClass(this.type, this.size) || 'la-ball-scale-multiple la-3x'; | ||
| this.spinnerSubscription = this.spinnerService.spinnerObservable.subscribe(function (flag) { | ||
| _this.showSpinner = flag; | ||
@@ -54,4 +60,31 @@ }); | ||
| /** | ||
| * @param {?} type | ||
| * @param {?} size | ||
| * @return {?} | ||
| */ | ||
| NgxSpinnerComponent.prototype.getClass = /** | ||
| * @param {?} type | ||
| * @param {?} size | ||
| * @return {?} | ||
| */ | ||
| function (type, size) { | ||
| var /** @type {?} */ sizeClass = ''; | ||
| switch (size.toLowerCase()) { | ||
| case 'small': | ||
| sizeClass = 'la-sm'; | ||
| break; | ||
| case 'medium': | ||
| sizeClass = 'la-2x'; | ||
| break; | ||
| case 'large': | ||
| sizeClass = 'la-3x'; | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| return sizeClass + ' la-' + type; | ||
| }; | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| NgxSpinnerComponent.prototype.ngOnDestroy = /** | ||
@@ -66,4 +99,4 @@ * @return {?} | ||
| selector: 'ngx-spinner', | ||
| template: "<div class=\"black-overlay\" *ngIf=\"showSpinner\"> <div class=\"la-ball-scale-multiple la-3x\"> <div></div> <div></div> <div></div> </div> </div>", | ||
| styles: [".black-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; opacity: 0.8; z-index: 99999 !important; pointer-events: none; } .la-ball-scale-multiple, .la-ball-scale-multiple>div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-scale-multiple { display: block; font-size: 0; color: #fff; } .la-ball-scale-multiple.la-dark { color: #333; } .la-ball-scale-multiple>div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-scale-multiple { width: 32px; height: 32px; } .la-ball-scale-multiple>div { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 100%; opacity: 0; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; -moz-animation: ball-scale-multiple 1s 0s linear infinite; -o-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; } .la-ball-scale-multiple>div:nth-child(2) { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .la-ball-scale-multiple>div:nth-child(3) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .la-ball-scale-multiple.la-sm { width: 16px; height: 16px; } .la-ball-scale-multiple.la-sm>div { width: 16px; height: 16px; } .la-ball-scale-multiple.la-2x { width: 64px; height: 64px; } .la-ball-scale-multiple.la-2x>div { width: 64px; height: 64px; } .la-ball-scale-multiple.la-3x { width: 96px; height: 96px; } .la-ball-scale-multiple.la-3x>div { width: 96px; height: 96px; } /* * Animation */ @-webkit-keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes ball-scale-multiple { 0% { opacity: 0; -moz-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes ball-scale-multiple { 0% { opacity: 0; -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -o-transform: scale(1); transform: scale(1); } } @keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .la-ball-scale-multiple>div { position: fixed; z-index: 999; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }"] | ||
| template: "<div class=\"black-overlay\" *ngIf=\"showSpinner\" [ngStyle]=\"{'opacity': bdOpacity,'background-color': bdColor}\"> <div [class]=\"spinnerClass\" [style.color]=\"color\"> <div></div> <div></div> <div></div> </div> </div>", | ||
| styles: ["@import 'loaders.css'; .black-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999 !important; pointer-events: none; } .black-overlay>div>div { position: fixed; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }"] | ||
| },] }, | ||
@@ -75,2 +108,9 @@ ]; | ||
| ]; }; | ||
| NgxSpinnerComponent.propDecorators = { | ||
| "bdOpacity": [{ type: Input },], | ||
| "bdColor": [{ type: Input },], | ||
| "size": [{ type: Input },], | ||
| "color": [{ type: Input },], | ||
| "type": [{ type: Input },], | ||
| }; | ||
| return NgxSpinnerComponent; | ||
@@ -77,0 +117,0 @@ }()); |
@@ -5,7 +5,14 @@ import { OnDestroy } from '@angular/core'; | ||
| export declare class NgxSpinnerComponent implements OnDestroy { | ||
| private spinner; | ||
| private spinnerService; | ||
| bdOpacity: number; | ||
| bdColor: string; | ||
| size: string; | ||
| color: string; | ||
| type: string; | ||
| spinnerClass: string; | ||
| showSpinner: boolean; | ||
| spinnerSubscription: Subscription; | ||
| constructor(spinner: NgxSpinnerService); | ||
| constructor(spinnerService: NgxSpinnerService); | ||
| getClass(type: string, size: string): string; | ||
| ngOnDestroy(): void; | ||
| } |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":4,"metadata":{"NgxSpinnerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NgxSpinnerComponent"}],"exports":[{"__symbolic":"reference","name":"NgxSpinnerComponent"}],"providers":[{"__symbolic":"reference","name":"NgxSpinnerService"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxSpinnerModule"},"providers":[{"__symbolic":"reference","name":"NgxSpinnerService"}]}}}},"NgxSpinnerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-spinner","template":"<div class=\"black-overlay\" *ngIf=\"showSpinner\"> <div class=\"la-ball-scale-multiple la-3x\"> <div></div> <div></div> <div></div> </div> </div>","styles":[".black-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; opacity: 0.8; z-index: 99999 !important; pointer-events: none; } .la-ball-scale-multiple, .la-ball-scale-multiple>div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-scale-multiple { display: block; font-size: 0; color: #fff; } .la-ball-scale-multiple.la-dark { color: #333; } .la-ball-scale-multiple>div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-scale-multiple { width: 32px; height: 32px; } .la-ball-scale-multiple>div { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 100%; opacity: 0; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; -moz-animation: ball-scale-multiple 1s 0s linear infinite; -o-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; } .la-ball-scale-multiple>div:nth-child(2) { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .la-ball-scale-multiple>div:nth-child(3) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .la-ball-scale-multiple.la-sm { width: 16px; height: 16px; } .la-ball-scale-multiple.la-sm>div { width: 16px; height: 16px; } .la-ball-scale-multiple.la-2x { width: 64px; height: 64px; } .la-ball-scale-multiple.la-2x>div { width: 64px; height: 64px; } .la-ball-scale-multiple.la-3x { width: 96px; height: 96px; } .la-ball-scale-multiple.la-3x>div { width: 96px; height: 96px; } /* * Animation */ @-webkit-keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes ball-scale-multiple { 0% { opacity: 0; -moz-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes ball-scale-multiple { 0% { opacity: 0; -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -o-transform: scale(1); transform: scale(1); } } @keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .la-ball-scale-multiple>div { position: fixed; z-index: 999; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgxSpinnerService"}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"NgxSpinnerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}]}}},"origins":{"NgxSpinnerModule":"./index","NgxSpinnerComponent":"./ngx-spinner.component","NgxSpinnerService":"./ngx-spinner.service"},"importAs":"ngx-spinner"} | ||
| {"__symbolic":"module","version":4,"metadata":{"NgxSpinnerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NgxSpinnerComponent"}],"exports":[{"__symbolic":"reference","name":"NgxSpinnerComponent"}],"providers":[{"__symbolic":"reference","name":"NgxSpinnerService"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxSpinnerModule"},"providers":[{"__symbolic":"reference","name":"NgxSpinnerService"}]}}}},"NgxSpinnerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-spinner","template":"<div class=\"black-overlay\" *ngIf=\"showSpinner\" [ngStyle]=\"{'opacity': bdOpacity,'background-color': bdColor}\"> <div [class]=\"spinnerClass\" [style.color]=\"color\"> <div></div> <div></div> <div></div> </div> </div>","styles":["@import 'loaders.css'; .black-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999 !important; pointer-events: none; } .black-overlay>div>div { position: fixed; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }"]}]}],"members":{"bdOpacity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bdColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgxSpinnerService"}]}],"getClass":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"NgxSpinnerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}]}}},"origins":{"NgxSpinnerModule":"./index","NgxSpinnerComponent":"./ngx-spinner.component","NgxSpinnerService":"./ngx-spinner.service"},"importAs":"ngx-spinner"} |
@@ -46,7 +46,13 @@ (function (global, factory) { | ||
| var NgxSpinnerComponent = (function () { | ||
| function NgxSpinnerComponent(spinner) { | ||
| function NgxSpinnerComponent(spinnerService) { | ||
| var _this = this; | ||
| this.spinner = spinner; | ||
| this.spinnerService = spinnerService; | ||
| this.bdOpacity = 0.8; | ||
| this.bdColor = '#333'; | ||
| this.size = 'large'; | ||
| this.color = '#fff'; | ||
| this.type = 'ball-scale-multiple'; | ||
| this.showSpinner = false; | ||
| this.spinnerSubscription = this.spinner.spinnerObservable.subscribe(function (flag) { | ||
| this.spinnerClass = this.getClass(this.type, this.size) || 'la-ball-scale-multiple la-3x'; | ||
| this.spinnerSubscription = this.spinnerService.spinnerObservable.subscribe(function (flag) { | ||
| _this.showSpinner = flag; | ||
@@ -56,4 +62,31 @@ }); | ||
| /** | ||
| * @param {?} type | ||
| * @param {?} size | ||
| * @return {?} | ||
| */ | ||
| NgxSpinnerComponent.prototype.getClass = /** | ||
| * @param {?} type | ||
| * @param {?} size | ||
| * @return {?} | ||
| */ | ||
| function (type, size) { | ||
| var /** @type {?} */ sizeClass = ''; | ||
| switch (size.toLowerCase()) { | ||
| case 'small': | ||
| sizeClass = 'la-sm'; | ||
| break; | ||
| case 'medium': | ||
| sizeClass = 'la-2x'; | ||
| break; | ||
| case 'large': | ||
| sizeClass = 'la-3x'; | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| return sizeClass + ' la-' + type; | ||
| }; | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| NgxSpinnerComponent.prototype.ngOnDestroy = /** | ||
@@ -68,4 +101,4 @@ * @return {?} | ||
| selector: 'ngx-spinner', | ||
| template: "<div class=\"black-overlay\" *ngIf=\"showSpinner\"> <div class=\"la-ball-scale-multiple la-3x\"> <div></div> <div></div> <div></div> </div> </div>", | ||
| styles: [".black-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; opacity: 0.8; z-index: 99999 !important; pointer-events: none; } .la-ball-scale-multiple, .la-ball-scale-multiple>div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-scale-multiple { display: block; font-size: 0; color: #fff; } .la-ball-scale-multiple.la-dark { color: #333; } .la-ball-scale-multiple>div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-scale-multiple { width: 32px; height: 32px; } .la-ball-scale-multiple>div { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 100%; opacity: 0; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; -moz-animation: ball-scale-multiple 1s 0s linear infinite; -o-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; } .la-ball-scale-multiple>div:nth-child(2) { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .la-ball-scale-multiple>div:nth-child(3) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .la-ball-scale-multiple.la-sm { width: 16px; height: 16px; } .la-ball-scale-multiple.la-sm>div { width: 16px; height: 16px; } .la-ball-scale-multiple.la-2x { width: 64px; height: 64px; } .la-ball-scale-multiple.la-2x>div { width: 64px; height: 64px; } .la-ball-scale-multiple.la-3x { width: 96px; height: 96px; } .la-ball-scale-multiple.la-3x>div { width: 96px; height: 96px; } /* * Animation */ @-webkit-keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes ball-scale-multiple { 0% { opacity: 0; -moz-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes ball-scale-multiple { 0% { opacity: 0; -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -o-transform: scale(1); transform: scale(1); } } @keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .la-ball-scale-multiple>div { position: fixed; z-index: 999; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }"] | ||
| template: "<div class=\"black-overlay\" *ngIf=\"showSpinner\" [ngStyle]=\"{'opacity': bdOpacity,'background-color': bdColor}\"> <div [class]=\"spinnerClass\" [style.color]=\"color\"> <div></div> <div></div> <div></div> </div> </div>", | ||
| styles: ["@import 'loaders.css'; .black-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999 !important; pointer-events: none; } .black-overlay>div>div { position: fixed; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }"] | ||
| },] }, | ||
@@ -77,2 +110,9 @@ ]; | ||
| ]; }; | ||
| NgxSpinnerComponent.propDecorators = { | ||
| "bdOpacity": [{ type: core.Input },], | ||
| "bdColor": [{ type: core.Input },], | ||
| "size": [{ type: core.Input },], | ||
| "color": [{ type: core.Input },], | ||
| "type": [{ type: core.Input },], | ||
| }; | ||
| return NgxSpinnerComponent; | ||
@@ -79,0 +119,0 @@ }()); |
| { | ||
| "name": "ngx-spinner", | ||
| "version": "0.1.4", | ||
| "version": "0.1.5", | ||
| "repository": { | ||
@@ -5,0 +5,0 @@ "type": "git", |
@@ -10,4 +10,4 @@ # ngx-spinner | ||
| - [Browser Support](#browser-support) | ||
| - [Demo](#demo) | ||
| - [Installation](#installation) | ||
| - [Example](#example) | ||
| - [Usage](#usage) | ||
@@ -17,2 +17,3 @@ - [Versioning](#versioning) | ||
| - [License](#license) | ||
| - [Future Plan](#future-plan) | ||
@@ -24,6 +25,11 @@ ## Browser Support | ||
| ## Demo | ||
| Workig Demo: [Plunkr Demo](https://plnkr.co/edit/vwWmv3mj8jUYA8ArHfXM?p=preview) | ||
| ## Installation | ||
| To install `ngx-spinner`, run: | ||
| `ngx-spinner` is available via [npm](https://www.npmjs.com/package/ngx-spinner) and [yarn](https://yarnpkg.com/en/package/ngx-spinner) | ||
| Using npm: | ||
| ```bash | ||
@@ -33,32 +39,19 @@ $ npm install ngx-spinner --save | ||
| ## Example | ||
| Using yarn: | ||
| ```bash | ||
| $ yarn add ngx-spinner | ||
| ``` | ||
| For working example see below Plunker: | ||
| https://plnkr.co/edit/vwWmv3mj8jUYA8ArHfXM?p=preview | ||
| ## Usage | ||
| Once you successfully installed library by runnig above command, now import required files in your `AppModule`: | ||
| Import `NgxSpinnerModule` in in the root module(`AppModule`): | ||
| ```typescript | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { AppComponent } from './app.component'; | ||
| // Import library module | ||
| import { NgxSpinnerModule, NgxSpinnerService } from 'ngx-spinner'; | ||
| import { NgxSpinnerModule } from 'ngx-spinner'; | ||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| // Specify library as an import | ||
| // ... | ||
| NgxSpinnerModule | ||
| ], | ||
| providers: [NgxSpinnerService], // Provide spinner service to hide/show spinner | ||
| bootstrap: [AppComponent] | ||
| ] | ||
| }) | ||
@@ -68,12 +61,6 @@ export class AppModule { } | ||
| Once you imported module and service, you can use its hide/show method of service in your `AppComponent`: | ||
| Add `NgxSpinnerService` service wherever you want to use the `ngx-spinner`. | ||
| ```typescript | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { NgxSpinnerService } from 'ngx-spinner'; | ||
| @Component({ | ||
| selector: 'app-root', | ||
| templateUrl: './app.component.html' | ||
| }) | ||
| class AppComponent implements OnInit { | ||
@@ -83,5 +70,9 @@ constructor(private spinner: NgxSpinnerService) { } | ||
| ngOnInit() { | ||
| this.spinner.show(); // Call this method to show spinner | ||
| /** spinner starts on init */ | ||
| this.spinner.show(); | ||
| this.spinner.hide(); // Call this method to hide spinner | ||
| setTimeout(() => { | ||
| /** spinner ends after 5 seconds */ | ||
| this.spinner.hide(); | ||
| }, 5000); | ||
| } | ||
@@ -91,9 +82,26 @@ } | ||
| Now use selector in your `app.component.html` | ||
| ```xml | ||
| <!-- You can now use library component in app.component.html --> | ||
| Now use in your template | ||
| ```html | ||
| <ngx-spinner></ngx-spinner> | ||
| ``` | ||
| See [Plunkr Demo](https://plnkr.co/edit/vwWmv3mj8jUYA8ArHfXM?p=preview) | ||
| ## NgxSpinner Service | ||
| - `NgxSpinnerService.show()` Shows the spinner | ||
| - `NgxSpinnerService.hide()` Hides the spinner | ||
| ## NgxSpinner Component | ||
| ```html | ||
| <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 | ||
@@ -111,3 +119,9 @@ ngx-spinner will be maintained under the Semantic Versioning guidelines. | ||
| ## 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) | ||
| #### The MIT License (MIT) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by25.65%
338
- Number of lines in readme file
- increased by12.26%
119
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-14.14%
18677
No dependency changes