Epic Spinners for Angular 🌀

#angular #animation #ux

🔸 Introduction

Epic Spinners is a set of reusable spinner components for Angular, which give us a nice animation while we wait for the information to load.

🔸 Installation

The installation is very simple we can use both Npm and Yarn:

npm install --save angular-epic-spinners or

yarn install angular-epic-spinners

🔸 How to use

For the example I have created a component called contact inside a module called contact.

In contact.module.ts we import the preferred spinner type and add them to the imports and exports section of the @NgModule


// import spinner module, In my case I have chosen SemipolarSpinnerModule
import { SemipolarSpinnerModule } from "angular-epic-spinners";


@NgModule({
  declarations: [...],
  imports: [
    ...
    SemipolarSpinnerModule,
  ],
  exports: [..., SemipolarSpinnerModule],
})

In contact.component.ts we create a field to store the state of loading, by default it will be true and when the response to a desired request is obtained or obtained, its value will be changed to false

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

import { SocialService } from '../../../services/social.service';

@Component({
  selector: 'contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.sass'],
  providers: [HttpClient, SocialService]
})

export class ContactComponent implements OnInit {
  // create field for data  
  public data;
  // create field default is loading
  public isLoading = true;

  constructor(
    // inject service
    private _socialService: SocialService
  ) { }

  ngOnInit() {
    // load request
    this._socialService.load().subscribe(
      response =>{
        // obtain and assign data
        this.data = response;

        // when we have the data, assign isLoading to false
        isLoading = false;
      },
      error => {
        console.log(error);
      }
    );
  }
}

In contact.component.html we call the previously imported spinner, we can configure some options such as color, animation speed, etc.

<div *ngIf="isLoading == undefined || isLoading">

  <!-- call and custom spinner -->
  <app-semipolar-spinner
  [animationDuration]="1500"
  [size]="70"
  [color]="'#C468CF'">
 </app-semipolar-spinner>

</div>