@uoh/spinner
A progress spinner with the logo of the University of Haifa
Installation
To install this library, run:
$ npm install @uoh/spinner --save
Consuming your library
Once installed, you can import in your Angular AppModule
by writing:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { SpinnerModule, SpinnerService } from '@uoh/spinner';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// Import to NgModule
SpinnerModule
],
// Import the service to activate the spinner
providers: [SpinnerService],
bootstrap: [AppComponent]
})
export class AppModule {}
Once the library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use the uoh-loader component in app.component.html -->
<h1>
{{title}}
</h1>
<uoh-spinner [size]="{width: 120}" [duration]="2000" [fps]="60" [minStrokeWidth]="5" [maxStrokeWidth]="30"
[circle]="{stop1: 0.5, stop2: 0.7}"></uoh-spinner>
Input Options
- size - An object containing the width and/or the height of the spinner. Note: only one of them is required, the other will be automatically calculated to constrain proportions
- duration - A number representing the duration for the animation in milliseconds
- fps - A number representing the frames per second for the animation
- minStrokeWidth - A number representing the minimum width of the line
- maxStrokeWidth - A number representing the maximum width of the line (the starting point)
- circle - An object containing two stops representing the percentage of frames to reach the minimum (step1) and the maximum widths (step2)
- path - A string containing svg coordinates for the figure (equivalent to the d attribute in a svg path)
Spinner Activation
The loader is activated/deactivated by calling the functions show/hide in the SpinnerService (respectively). The SpinnerService exposes a BehaviorSubject of type Boolean named 'loading', which can be used to determine if a loading procedure is taking place.
For example, in your component.ts:
import { SpinnerService } from '@uoh/spinner';
@Component({
selector: 'app',
template: `
<h1>
{{title}}
</h1>
<button (click)="loadStuff()" [disabled]="spinner.loading | async" >Load Stuff</button>
<uoh-spinner></uoh-spinner>
`
})
export class AppComponent {
data: Stuff[];
constructor(public spinner: SpinnerService, private apiService: ApiService) {}
loadStuff(): void {
this.spinner.show();
this.apiService.loadStuff.subscribe(data => (this.data = data), _, this.spinner.hide());
}
}
License
MIT © Pablo Saracusti