alf-spinner v9.0.1

AlfSpinner

Component to show a spinner.

Installation

Using npm:

npm install alf-spinner

Usage

In module:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
// Modules
import { AppRoutingModule } from './app-routing.module';
import { AlfSpinnerModule } from 'alf-spinner';
 
// Components
import { AppComponent } from './app.component';
import { ExampleSpinnerComponent } from './examples/example-alf-spinner/example-alf-spinner.component';
 
@NgModule({
  declarations: [
    AppComponent,
    ExampleSpinnerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AlfSpinnerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your ts:

import { Component, OnInit } from '@angular/core';
import { AlfSpinnerService } from 'Alf-spinner';
 
@Component({
  selector: 'example-Alf-spinner',
  templateUrl: './example-Alf-spinner.component.html',
  styleUrls: ['./example-Alf-spinner.component.css']
})
export class ExampleSpinnerComponent implements OnInit {
 
  // For spinner embedded in element
  public embedded: boolean;

  // For color of phraseShow (optional)
  public color: string;
 
  constructor(private alfSpinner: AlfSpinnerService) { 
    this.embedded = false;
  }
 
  ngOnInit() {
  }
 
  activateSpinner(){
    // Also color expressed in HEX (#afafaf)
    this.color = 'red'; 

    // Param phraseShow (optional), the phrase that will be show above spinner (ex. Loading....)
    this.alfSpinner.showSpinner(phraseShow);
 
    // Param timer (optional) to hide spinner (in milliseconds)
    this.alfSpinner.hideSpinner(5000);
  }
 
  changeMode(){
    this.embedded = !this.embedded;
  }

}

In your html:

<div class="row">
  <div class="col-12">
    {{ 'Actual mode: ' + (embedded ? 'Embedded' : 'Not embedded')}}
  </div>
  <div class="col-4"></div>
</div>

<div class="row">
  <div class="col-12">
    <div class="form-group">
      <input name="" id="" class="btn btn-primary" type="button" value="Show spinner" (click)="activeSpinner()">
      <input name="" id="" class="btn btn-primary" type="button" value="Change method" (click)="changeMode()">

    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="embedded">
      <alf-spinner *ngIf="embedded" [embedded]="true"></alf-spinner>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim beatae exercitationem veritatis dicta rem? Temporibus vitae dolor
      laboriosam recusandae. Sint temporibus reprehenderit ducimus praesentium id ullam! Adipisci, maxime! Illum, quam.
    </div>
  </div>
</div>
<alf-spinner *ngIf="!embedded"></alf-spinner>