🔸 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>
🔸 Types spinners
Epic spinner offers us a lot of spinner here I will show some examples:
Semipolar-spinner:
Fulfilling-square-spinner:
Demo Semipolar-spinner in my Portfolio:
Show more examples here.
🔸 Source
Thanks for reading me. 😊
Top comments (0)