# ng2-component-spinner

> A fairly simple and customizable spinner for your angular 2/4 component.

Latest version **0.2.1** (published 2017-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-component-spinner
pnpm add ng2-component-spinner
yarn add ng2-component-spinner
bun add ng2-component-spinner
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-04-11 |
| First published | 2017-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.0.0 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Shubhangi Gupta |
| Maintainers | shubhi1407 |
| Keywords | angular, angular2, angular4, spinner, typescript, component-loader, component-spinner |

## Links

- npm: https://www.npmjs.com/package/ng2-component-spinner
- Repository: https://github.com/shubhi1407/ng2-component-spinner
- Homepage: https://github.com/shubhi1407/ng2-component-spinner#readme
- Issues: https://github.com/shubhi1407/ng2-component-spinner.git/issues
- npm.io page: https://npm.io/package/ng2-component-spinner

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2017-04-11
- 0.1.9 — 2017-04-11
- 0.1.8 — 2017-04-11
- 0.1.7 — 2017-04-11
- 0.1.6 — 2017-04-08
- 0.1.5 — 2017-04-05
- 0.1.4 — 2017-04-04
- 0.1.3 — 2017-04-04
- 0.1.2 — 2017-04-04
- 0.1.1 — 2017-04-04
- 0.1.0 — 2017-04-04

## README

# ng2-component-spinner

## Installation

To install this library, run:

```bash
$ npm install ng2-component-spinner --save
```
## [View Demo](https://shubhi1407.github.io/ng2-component-spinner/)

## Usage

```bash
$ npm install ng2-component-spinner
```
Configure your System.config
```javascript
System.config({
  defaultJSExtensions: true,
  map: {
    "angular2": "node_modules/angular2",
    "rxjs": "node_modules/rxjs",
    ...
    "ng2-component-spinner": "node_modules/ng2-component-spinner/dist"
  },
  packages: {        
    'app': {
      main : './main.ts',
      defaultJSExtensions : 'ts'
    },
    'ng2-component-spinner' : {
      defaultExtension : 'js',
      main : 'index.js'
    }
  }
});
```
and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import Module
import { SpinnerComponentModule } from 'ng2-component-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,    
    // Add module to imports
    SpinnerComponentModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once this library is imported, you can use it in your Angular application:
NOTE: For this component to work, your template *must* be wrapped in a relative positioned root element.
```xml
<div style="position:relative">
    <h1>
        {{title}}
    </h1>
    <spinner-component [spinnerShow]="<booleanVariable>"></spinner-component>
</div>
```
Use a custom CSS spinner like this
```xml
<spinner-component [spinnerShow]="show">
    <div class="spinner-2">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
</spinner-component>
```
## Development

To generate all `*.js`, `*.js.map` and `*.d.ts` files:

```bash
$ npm run tsc
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Shubhangi Gupta](mailto:shubhangi140793@gmail.com)

---
_Source: https://npm.io/package/ng2-component-spinner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._