Epic Spinners for Angular 🌀
Tags: angular, animation, ux
Published: 2020-04-27 16:07:40


### :small_orange_diamond: 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.

### :small_orange_diamond: 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``

### :small_orange_diamond: 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``

``` ts

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

```

``` ts

@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``

``` ts
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.

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

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

</div>
```

### :small_orange_diamond: Types spinners

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

#### ``Semipolar-spinner``:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/enbno8sv8a77afcxzziw.gif)

#### ``Fulfilling-square-spinner``:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3o6pwqppauemz36ceo1g.gif)

#### Demo ``Semipolar-spinner`` in my Portfolio:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3j70isqu6kgbyw2j9wvr.gif)

Show more examples [here](https://hackafro.github.io/angular-epic-spinners/).


### :small_orange_diamond: Source

[Github Documentation](https://github.com/hackafro/angular-epic-spinners)

Thanks for reading me. 😊