@joshdoescode/spinner-component v1.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.
.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago