# flexible-spinner

> flexible-spinner is a library which can be generated dynamically using Input properties. It can be used in many different places e.g. inside buttons, paragraphs etc, or on center position for whole current application. Fully wrote with TypeScript.

Latest version **1.0.5** (published 2021-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install flexible-spinner
pnpm add flexible-spinner
yarn add flexible-spinner
bun add flexible-spinner
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-07-06 |
| First published | 2021-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 63.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hasan Ibishi |
| Maintainers | hasanibishi |

## Links

- npm: https://www.npmjs.com/package/flexible-spinner
- Repository: https://github.com/hasanibishi/flexible-spinner
- Homepage: https://github.com/hasanibishi/flexible-spinner#readme
- Issues: https://github.com/hasanibishi/flexible-spinner/issues
- npm.io page: https://npm.io/package/flexible-spinner

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0

## Recent versions

- 1.0.5 (latest) — 2021-07-06
- 1.0.4 — 2021-07-06
- 1.0.3 — 2021-07-06
- 0.0.3 — 2021-07-06

## README

# Flexible Spinner

flexible-spinner is a library which can be generated dynamically using Input properties. It can be used in many different places e.g. inside buttons, paragraphs etc, or on center position for whole current application. Fully wrote with TypeScript.

## Demo
👉 Live Demo: http://flexible-spinner.atwebpages.com/


## Getting started
```
npm install --save flexible-spinner
```

## Setup
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FlexibleSpinnerModule } from 'flexible-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FlexibleSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## Using the component
### .html
```
<flexible-spinner [spinnerId]="1"
                  [centerPosition]="false"
                  [speed]="2"
                  [size]="50"
                  [thickness]="10"
                  [filledWidth]="1"
                  [filledColor]="'red'"
                  [unFilledColor]="'#eee'"
                  [showText]="true"
                  [text]="'Loading...'"
                  [textSize]="16"
                  [textColor]="'red'"></flexible-spinner>
```

### .ts
```
import { FlexibleSpinnerService } from 'flexible-spinner';
...

constructor(
  private spinnerService: FlexibleSpinnerService
) { }

ngOnInit() {
  this.showSpinner();
}

showSpinner() {
  this.spinnerService.showSpinner(1);
}

hideSpinner() {
  this.spinnerService.hideSpinner(1);
}
```

## Input properties

| @Input        	    | Type     	    |  Description    |
|---------------------|---------------|-----------------
| **spinnerId**       | number        | In the same it can be used in multiple places adding **spinnerId** |
| **centerPosition**  | boolean       | It can be used on center position or in other places adding **centerPosition** |
| **speed**           | number        | Rotation speed in **seconds**
| **size**            | number        | Size in **px**
| **thickness**       | number        | Thickness in **px**
| **filledWidth**     | number        | Value must be 1, 2 or 3. It means the spinner can be filled 25%, 50% or 75%
| **filledColor**     | string        | Color that is filled
| **unFilledColor**   | string        | Color that is not filled
| **showText**        | boolean       | Is possible to show text or message below the spinner
| **text**            | string        | The text e.g. **Loading...**
| **textSize**        | number        | The size of text in **px**
| **textColor**       | string        | The color of text

## License
MIT


## Author
Hasan Ibishi

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