Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including angular-polygon-spinners with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. var angularPolygonSpinners = require("angular-polygon-spinners")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-polygon-spinners v1.0.4

Angular spinner animation library

Angular Polygon Spinners

Build Status support support npm License

Spinner animation library for Angular 6 or 7. Demo here.

Intended for experimentation and not for production.

Installation

npm install --save angular-polygon-spinners

Usage

Import the module into your module file.

import { PolygonSpinnerModule } from 'angular-polygon-spinners';

  @NgModule({
    imports: [PolygonSpinnerModule]
  })

Components

Each component is 200px x 200px by default and can be scaled accordingly.

Customizable spinner

  <app-custom-spinner [spinnerConfigs]="configs"></app-custom-spinner>

Configs are defined in the parent component's TypeScript file.

The polygons are layered by order in the polygon array. [ (Back) , (Front) ]

A basic configuration:

configs = {
  polygons: [
    {
      sides: 3,
      size: 100,
      fill: {
        color: "red",
        colorChange: {}
      },
      stroke: {
        color: "blue",
        width: 8,
        strokeLinecap: "butt",
        colorChange: {},
        dash: {}
      },
      spin: {
        direction: "clockwise",
        time: "2s",
        type: "linear"
      }
    },
    {
      sides: 8,
      ...
    }
  ]
}
  • sides The number of sides on the polygon (3-10)
  • size The scaled size of the polygon (0-100)
  • fill.color Shape fill color (color value | null)
  • stroke.color Stroke color (color value | null)
  • stroke.width Stroke width (width value | null)
  • stroke.strokeLinecap SVG strokeLinecap attribute
Animation Options
  • spin.direction Rotation direction (clockwise | counter-clockwise)
  • spin.time Duration of one 360 degree spin
  • spin.type CSS animation-timing-function property

Color changes can be applied to fill and strokes:

colorChange: {
  colors: ["#f49e42", "red", "black"],
  time: "5s"
}

Dash properties can be applied to strokes:

dash: {
  dashArray: 10,
  dashOffset: 500,
  direction: "clockwise",
  type: "linear",
  time: "20s"
}

Preset Spinners

Listed are preset, non-configurable spinners:

  <app-three-spinner></app-three-spinner>

  <app-four-spinner></app-four-spinner>

  <app-five-spinner></app-five-spinner>

  <app-six-spinner></app-six-spinner>

  <app-seven-spinner></app-seven-spinner>

  <app-eight-spinner></app-eight-spinner>

  <app-nine-spinner></app-nine-spinner>

  <app-ten-spinner></app-ten-spinner>

License

MIT © Justin Haupt

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free