https://github.com/pguso/angular-circliful
circle statistic for angular
https://github.com/pguso/angular-circliful
Last synced: 7 months ago
JSON representation
circle statistic for angular
- Host: GitHub
- URL: https://github.com/pguso/angular-circliful
- Owner: pguso
- Created: 2020-04-13T16:07:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-14T09:05:30.000Z (over 6 years ago)
- Last Synced: 2025-03-01T13:49:00.054Z (over 1 year ago)
- Homepage: https://stackblitz.com/edit/angular-dwxhu5
- Size: 93.8 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Circliful
Draws an animatable svg circle with some other features in your angular projects.
## Getting started
#### Install circliful in your project
```
npm install angular-circliful
```
#### Once installed you need to import the module:
```typescript
import {AngularCirclifulModule} from 'angular-circliful';
@NgModule({
...
imports: [AngularCirclifulModule, ...],
...
})
export class AppModule {}
```
#### Integrate the component somewhere in your Application
```typescript
export class YourComponent {
percent = {
value: 60
};
strokeWidth = 15;
color = 'blue';
}
```
```html
```
Available Options
| property | default | type | description
| ------------- |------------- | ----- | ----- |
| percent | / | object | the percentage of the circle
| color | #666 | string | color foreground circle
| gradient | / | object | startColor and endColor for gradient of foreground circle
| customClasses | / | object | set custom css classes for each svg child element
| strokeLinecap | butt | string | style of stroke endings
| strokeWidth | 15 | number | stroke width of foreground circle
| progressColors | / | array | holds an array of objects with color and percent, the percent value is the starting point for the color change
| backgroundCircle | / | object | config for the background circle
| animate | true | boolean | animation of the foreground circle
| animateInView | false | boolean | animation of the foreground circle in viewport
| text | / | object | config for the info text
| point | / | object | config for a point in the center
**percent** percentage text and percentage fill of foreground circle
| property | default | type
| ------------- |------------- | ----- |
| value | / | number
| color | / | string
noPercentageSign | false | boolean
**gradient** start end end color of gradient
| property | default | type
| ------------- |------------- | ----- |
| startColor | / | string
| endColor | / | string
**customClasses** set custom css classes for each svg child element
| property | default | type
| ------------- |------------- | ----- |
| foregroundCircle | / | string
| backgroundCircle | / | string
| percent | / | string
| text | / | string
| svgContainer | / | string
| point | / | string
**progressColors** holds an array of objects with color and percent, the percent value is the starting point for the color change
| property | default | type
| ------------- |------------- | ----- |
| color | / | string
| percent | / | number
**backgroundCircle** config for the background circle
| property | default | type
| ------------- |------------- | ----- |
| color | / | string
| strokeWidth | / | number
**text** config for the info text
| property | default | type
| ------------- |------------- | ----- |
| position | 'middle' | string
| x | / | number
| y | / | number
| content | / | string
**point** config for a point in the center
| property | default | type
| ------------- |------------- | ----- |
| color | / | string
| radius | / | number
Donation
--------
If you find this module useful or/and use it commercially feel free to donate me a cup of coffee :)
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=D3F2MMNDHQ9KQ)