npm package: @joshdoescode/spinner-component
Description: There are currently 6 spinners/loaders to pick from.
Author: Joshua T Cain
Latest version: 1.0.0

# Angular 5 Spinner Component

There are currently 6 spinners/loaders to pick from.

## Installation

Run '``npm install --save @joshdoescode/spinner-component``' form the root of your project.

In your '``app.module.ts``' add the spinner module and service to your project:

````
import { SpinnerModule, SpinnerService } from '@joshdoescode/spinner-component/dist/';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SpinnerModule <--
  ],
  providers: [
    ...
    SpinnerService <--
  ],
  ...
})
export class AppModule { }
````

## The Component

To add the spinner to your UI you simply need to add the below to a 
component that will be present when you want to use it. If you will be using the spinner a lot; 
consider adding it to a footer component, or even the '``App.Component``' itself.

````
<app-spinner></app-spinner>
````

**Properties**

``[spinner]`` (number, default: ``0``) - The spinner that you want to be used, starting at ``0``.

``[baseColour]`` (string, defaults to spinner default) - A hex code to be used with some of the spinners to 
change their solid colours. This string must include the '``#``' sign (e.g. '``#ff0000``').

``[useScreen]`` (boolean, default: ``true``) - Whether to also display a screen over the other content of the page, 
to prevent interaction whilst the spinner is displayed.

``[screenOpacity]`` (number, default 40) - Opacity of the 'screen' used to block interaction with the UI whilst the 
spinner is displayed, as a percentage. Do not include the percentage sign.

**Property example**

````
<app-spinner [spinner]="5" [baseColour]="'#ff0000'" [screenOpacity]="90"></app-spinner>
````

## The Service

The service is used for one thing: turning the spinner off and on. By default it is 'off'.

To use the service, inject it into a component/service, and then call its methods:

````
import { SpinnerService } from '@joshdoescode/spinner-component/dist';

@Component({
  ...
})
export class HomeComponent implements OnInit {
  
  constructor(private _spinnerService: SpinnerService) { <---
    ...
  }
    
  ngOnInit() { }
}
````

**Methods**

``toggleShowSpinner()`` - Show or hide the spinner, based on its current status.

``showSpinner()`` - Display the spinner.

``hideSpinner()`` - Hide the spinner.

**Method example**

````
import { SpinnerService } from '@joshdoescode/spinner-component/dist';

@Component({
  ...
})
export class HomeComponent implements OnInit {

  constructor(private _spinnerService: SpinnerService) {
    ...
  }

  public makeApiCall() {
    this._spinnerService.showSpinner(); <---
    ...
  }

  ngOnInit() { }
}
````

## The Spinners

**#0** - Classic rotation circle, which also cycles colours.

**#1** - 'loading' text, with large solid colour plane icon circling it. 
The color of this can be altered with the '``[baseColour]``' component property.

**#2** - 'Loading' text, with large outlined plane icon circling, both cycling colours in sync with each other.

**#3** - 'Loading' text, cycling colours.

**#4** - 'Loading' text, with small outlined plane icon circling, both cycling colours in sync with each other.

**#5** - Semi-solid coloured globe, with a small outlined plane icon circling.
The color of this can be altered with the '``[baseColour]``' component property.

.