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.

.