Posted on Apr 27, 2020

Epic Spinners for Angular 🌀

🔸 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>