DEV Community

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

Posted on

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

  declarations: [...],
  imports: [
  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';

  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;

    // inject service
    private _socialService: SocialService
  ) { }

  ngOnInit() {
    // load request
      response =>{
        // obtain and assign data = response;

        // when we have the data, assign isLoading to false
        isLoading = false;
      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 -->

Enter fullscreen mode Exit fullscreen mode

🔸 Types spinners

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


Alt Text


Alt Text

Demo Semipolar-spinner in my Portfolio:

Alt Text

Show more examples here.

🔸 Source

Github Documentation

Thanks for reading me. 😊

Top comments (0)