@accubits/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.

Usage no npm install needed!

<script type="module">
  import accubitsSpinner from 'https://cdn.skypack.dev/@accubits/spinner';
</script>

README

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:

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

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

Add SpinnerService 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()

Custom HTML

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

Additional Options

Go to GITHUB for more options