DEV Community

Cover image for Epic Spinners for Angular 🌀
Jesús Mejías Leiva
Jesús Mejías Leiva

Posted on

4 1

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";

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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);
      }
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

🔸 Types spinners

Epic spinner offers us a lot of spinner here I will show some examples:

Semipolar-spinner:

Alt Text

Fulfilling-square-spinner:

Alt Text

Demo Semipolar-spinner in my Portfolio:

Alt Text

Show more examples here.

🔸 Source

Github Documentation

Thanks for reading me. 😊

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay