Spinner

A Library to easily create your own custom loaders for pages. The spinner allows create your own HTML and use the SpinnerService to control it in your whole project.

Demo

View the demo here

Installation

Install spinner via npm

$ npm install @accubits/spinner --save

Usage

Import SpinnerModule in in the root module(AppModule):

// Import library module
import { SpinnerModule } from '@accubits/spinner';

@NgModule({
  imports: [
    // ...
    SpinnerModule
  ]
})
export class AppModule { }

Add SpinnerService service where you want to use the spinner.

import { SpinnerService } from '@accubits/spinner';

class ExampleComponent implements OnInit {

  constructor(private spinner: SpinnerService) { }

  ngOnInit() {
    
    this.spinner.show();

    setTimeout(() => {
       
        this.spinner.hide();
    }, 3000);
  }
}

Now use in your template

<ab-spinner></ab-spinner>

Spinner Service

• SpinnerService.show()
• SpinnerService.hide()

Spinner Component

<ab-spinner
        type="ripple" // ripple, bounce, roller or custom
        backgroundColor="#00000066" //hex or rgba
        color="#ffffff" //hex or rgba
        loadingText="Loading"
>
</ab-spinner>

Custom HTML

<ab-spinner type="custom">
  <p class="spinner">
    <img src="assets/images/loader.gif" />
    <span>LOADER....</span>
  </p>
</ab-spinner>