Skip to content
Reusable angular components for epic-spinners
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src Upgrade to angular 6 Jun 7, 2018
.editorconfig Create all spinner components. Jan 11, 2018
.gitignore Create all spinner components. Jan 11, 2018
.npmignore Add files and folders to npmignore Jan 17, 2018
.travis.yml Update karma config file location Jan 15, 2018
LICENSE Add files and folders to npmignore Jan 17, 2018
README.md Add repository details Feb 5, 2018
angular.json Upgrade to angular 6 Jun 7, 2018
karma.conf.js Upgrade to angular 6 Jun 7, 2018
ng-package.json Create feature modules for each spinner component. Change main export… Jan 17, 2018
package.json Upgrade to angular 7.0 Oct 25, 2018
protractor.conf.js Create all spinner components. Jan 11, 2018
public_api.ts Create feature modules for each spinner component. Change main export… Jan 17, 2018
tsconfig.json Create all spinner components. Jan 11, 2018
tslint.json Upgrade to angular 6 Jun 7, 2018
yarn.lock

README.md

Angular Epic Spinners

npm npm npm

Reusable angular components for epic spinners

Demo

Visit the demo page to see spinners in action

Installation

npm install --save angular-epic-spinners

OR

yarn install angular-epic-spinners

Usage

Example

Import each spinners' module into your module file and use the spinner component anywhere.

  import {AtomSpinnerModule} from 'angular-epic-spinners'
  
  @NgModule({
    imports: [AtomSpinnerModule]
  })

Then in your html file

  <app-atom-spinner
     [animationDuration]="1000"
     [size]="60"
     [color]="'#ff1d5e'"
    ></app-atom-spinner>

Components list

You can easily configure spinners' size, color and animation speed

<app-flower-spinner
  [animationDuration]="2500"
  [size]="70"
  [color]="'#ff1d5e'"
></app-flower-spinner>

<app-pixel-spinner
  [animationDuration]="2000"
  [pixelSize]="70"
  [color]="'#ff1d5e'"
></app-pixel-spinner>

<app-hollow-dots-spinner
  [animationDuration]="1000"
  [dotSize]="15"
  [dotsNum]="3"
  [color]="'#ff1d5e'"
></app-hollow-dots-spinner>

<app-intersecting-circles-spinner
  [animationDuration]="1200"
  [size]="70"
  [color]="'#ff1d5e'"
></app-intersecting-circles-spinner>

<app-orbit-spinner
  [animationDuration]="1200"
  [size]="55"
  [color]="'#ff1d5e'"
></app-orbit-spinner>

<app-radar-spinner
  [animationDuration]="2000"
  [size]="60"
  [color]="'#ff1d5e'"
></app-radar-spinner>

<app-scaling-squares-spinner
  [animationDuration]="1250"
  [size]="65"
  [color]="'#ff1d5e'"
></app-scaling-squares-spinner>

<app-half-circle-spinner
  [animationDuration]="1000"
  [size]="60"
  [color]="'#ff1d5e'"
></app-half-circle-spinner>

<app-trinity-rings-spinner
  [animationDuration]="1500"
  [size]="66"
  [color]="'#ff1d5e'"
></app-trinity-rings-spinner>

<app-fulfilling-square-spinner
  [animationDuration]="4000"
  [size]="50"
  [color]="'#ff1d5e'"
></app-fulfilling-square-spinner>

<app-circles-to-rhombuses-spinner
  [animationDuration]="1200"
  [circlesNum]="3"
  [circleSize]="15"
  [color]="'#ff1d5e'"
></app-circles-to-rhombuses-spinner>
    
<app-semipolar-spinner
  [animationDuration]="2000"
  [size]="65"
  [color]="'#ff1d5e'"
></app-semipolar-spinner>
    
<app-self-building-square-spinner
  [animationDuration]="6000"
  [size]="40"
  [color]="'#ff1d5e'"
></app-self-building-square-spinner>
    
<app-swapping-squares-spinner
  [animationDuration]="1000"
  [size]="65"
  [color]="'#ff1d5e'"
></app-swapping-squares-spinner>

<app-fulfilling-bouncing-circle-spinner
  [animationDuration]="4000"
  [size]="60"
  [color]="'#ff1d5e'"
></app-fulfilling-bouncing-circle-spinner>

<app-fingerprint-spinner
  [animationDuration]="1500"
  [size]="64"
  [color]="'#ff1d5e'"
></app-fingerprint-spinner>

<app-spring-spinner
  [animationDuration]="3000"
  [size]="60"
  [color]="'#ff1d5e'"
></app-spring-spinner>

<app-atom-spinner
  [animationDuration]="1000"
  [size]="60"
  [color]="'#ff1d5e'"
></app-atom-spinner>

<app-looping-rhombuses-spinner
  [animationDuration]="2500"
  [rhombusSize]="15"
  [color]="'#ff1d5e'"
></app-looping-rhombuses-spinner>

<app-breeding-rhombus-spinner
  [animationDuration]="2000"
  [size]="65"
  [color]="'#ff1d5e'"
/><app-breeding-rhombus-spinner>

Support?

  • Star the repo ⭐️
  • Create pull requests
  • Follow me on twitter @iamAfro

License

MIT license.

You can’t perform that action at this time.