Spinner

The Spinner component provides a circular progress indicator.

Demo

Check out the demo on StackBlitz: Demo

Installation

``bash
npm i @ea-controls/spinner
`

Configuration

`ts
// app.config.ts

import { provideEaSpinner } from "@ea-controls/spinner";

export const appConfig: ApplicationConfig = {
providers: [
...provideEaSpinner({
// <-- provide spinner
color: string, // <-- default color is white
}),
],
};
`

Usage

In your component, inject SpinnerService and use its methods show(message?) or hide() to control the spinner:

`ts
// app.component.ts

import { SpinnerService } from '@ea-controls/spinner';
import { timer } from 'rxjs';

constructor(private spinnerService: SpinnerService) {
this.spinnerService.show("Saving data...");

timer(1000).subscribe(_ => {
this.spinnerService.show("Data saved...");
});

timer(2000).subscribe(_ => {
this.spinnerService.show("Loading data...");
});

timer(3000).subscribe(_ => {
this.spinnerService.hide();
});
}
`

Customization

You can change spinner animation, follow below instructions, use structural directive *ea-spinner-template

`html

``

Result

!Spinner

Custom Content

You can customize the spinner content as shown below:

!Custom Spinner