@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