https://github.com/Feridum/angular2-circle-progress

https://github.com/Feridum/angular2-circle-progress

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/Feridum/angular2-circle-progress
• Owner: Feridum
• Created: 2016-08-25T07:44:10.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-25T08:16:33.000Z (over 8 years ago)
• Last Synced: 2024-08-02T08:10:12.028Z (6 months ago)
• Language: TypeScript
• Size: 1.89 MB
• Stars: 14
• Watchers: 2
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - angular2-circle-progress

README

        
# CircleProgress

This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.11-webpack.2.

# [Demo](https://feridum.github.io/angular2-circle-progress/)

## About

It is a simple circle progress component created for Angualar2. When it was creating Angular2 was in RC5 version.

Component is based only on SVG Graphics and has various of options to customize it.

## Options

Option | Type | Default | Description |Example

--- | --- | --- | --- | ---

percent | `number` | 0 | Number of percent you want to show | `[percent]="20"`

boxSize | `number` | 200| Size of whole svg element | `[boxSize]="300"`

radius | `number` | 180 | Radius od circle | `[radius]="90"`

time| `number` | 0 | Time in sec for progress animation| `[time]="2"` 

border | `number` | 20 | Width of circle | `[border]="30"`

color | `string` | 'green' | Color of progress circle | `[color] = "'blue'"`

backgroundColor | `string` | 'white' | Color of rest of the circle | `[backgroundColor] = "'purple'"`

lowColor | `string` | same os `color` option | Color for percent from 0%->25%| `[lowColor]="'red'"`

middleColor | `string` | look above | Color for percent from 26%->50%| `[lowColor]="'orange'"`

interColor | `string` | look above | Color for percent from 51%->75%| `[lowColor]="'yellow'"`

highColor | `string` | look above | Color for percent from 76%->100%| `[lowColor]="'green'"`

fontColor | `string` | black | Color of font inside circle | `[fontColor]="'grey'"`

fontSize | `number` | 12 | Size font inside circle | `[fontSize]="20"`

fontFamily | `string` | 'Times New Roman' | Family of font inside circle | `[fontColor]="'Arial'"`

fontX | `string` | '50%' | X position of text inside in circle | `[fontX]="'20%'"`

fontY | `string` | '55%' | Y position of text inside in circle | `[fontY]="'60%'"`

textAnchor | `string` | 'middle' | Align of text. Possible values(start, middle, end) | `[textAnchor]="'end'"`

innerFill | `string` | 'white' | Color of inner circle | `[fontY]="'pink'"`

## Animation

To start progress animation you have to call function `animate()` on component.

## Example

```

  ```