flexible-spinner v1.0.5

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

License

MIT

Author

Hasan Ibishi