Reusable angular components for epic spinners
Visit the demo page to see spinners in action
npm install --save angular-epic-spinners
OR
yarn install angular-epic-spinners
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>
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>
- Star the repo ⭐
- Create pull requests
- Follow me on twitter @iamAfro
MIT license.