@stejnar/progress

Angular component library for SVG based progress indicators.

Build with lib-starter: https://github.com/Stejnar/lib-starter

npm package: https://www.npmjs.com/package/@stejnar/progress

Components

1. ProgressSpinner

<progress-spinner>

@Input value: number

• in percent

@Input fadeInOut: boolean

• currently required
• provides fadein and fadeout animation
• use this instead of ngIf

@Input infinite: boolean

• requires value if set to false

@Input strength: number

• stroke width
• defaults to 10px

@Input ratio: number

• ratio * strength = width === height
• defaults to 10

@Input speed: number

• in seconds per rotation
• defaults to 0.75s/rot

@Input color: string

• any format svg supports
• defaults to #11bb11 (green)

Usage

<progress-spinner fadeInOut="shown" infinite="true" strength="5" ratio="10">
</progress-spinner>

<progress-spinner value="progress" color="red"></progress-spinner>