A circular progressbar component, built with SVG and extensively customizable
npm install @delowar/react-circle-progressbarHighly customizable & lightweight circular progressbar component for React, built with SVG and extensively customizable.
* Installation
* Usage and Examples
* Props
* Gradient (props.gradient)
* Shadow (props.shadow)
* Callback
* Default Props
Install with npm:
```
npm i @delowar/react-circle-progressbar
or yarn:
``
yarn add @delowar/react-circle-progressbar
`javascript
import React from 'react';
import Progress from '@delowar/react-circle-progressbar';
// Basic Usage
// with children
// Default Gradient
// Customize Gradient
isGradient
gradient={{
angle: 90,
startColor: '#ff0000',
stopColor: '#ffff00'
}}
/>
// Default Shadow
// Customize Shadow
isBgShadow
bgShadow={{
inset: true,
vertical: 2,
horizontal: 2,
blur: 4,
opacity: .4,
color: '#000000'
}}
emptyColor="#f7f7f7"
borderWidth="6"
borderBgWidth="30"
/>
`
Available Props, this package supports 30+ props
| Names | Description | Default Value | Type | Range/Max
| ------ | ------ | ------ | ------ | ------ |
| size | Circle height & Width | 180 | Int | ∞ |15
| borderWidth | Circle Border width | | Int | ∞ |15
| borderBgWidth | Circle Border Background width | | Int | ∞ |#288feb
| fillColor | Stroke Fill Color | | String | N/A |#288feb
| emptyColor | Stroke (empty) BG Fill Color | | String | N/A |none
| background | Circle Background | | String | N/A |''
| className | Component Custom Class | | String | N/A |55
| percent | Fill Percent | | Int | 100 |round
| linecap | Stroke Line Style | | String | N/A |false
| isGradient | Enable Gradient | | Boolean | N/A |200
| transition | Apply transition when percent change | (ms) | Int | ∞ |false
| gradient | Gradient Essential Values | {...} | Object | N/A |
| isShadow | Enable Circle Shadow | | Boolean | N/A |false
| shadow | Shadow Essential Values | {...} | Object | N/A |
| isBgShadow | Enable Circle BG Shadow | | Boolean | N/A |true
| bgShadow | Shadow Essential Values | {...} | Object | N/A |
| viewport | Animate when element is in viewport | | Boolean | N/A |null
| onViewport | Callback function to detect viewport | | Function | N/A |
#### Example:
`javascript`
| Names | Description | Default Value | Type | Range/Max
| ------ | ------ | ------ | ------ | ------ |
| angle | Gradinet Angle | 0 | Int | 0-360 |#ff0000
| startColor | Gradient Start Color | | String | N/A |#ffff00
| stopColor | Gradient Stop Color | | String | N/A |
#### Example:
`javascript`
isGradient
gradient={{
angle: 90,
startColor: '#ff0000',
stopColor: '#ffff00'
}}
/>
| Names | Description | Default Value | Type | Range/Max
| ------ | ------ | ------ | ------ | ------ |
| inset | Set Shadow Inset or Outset | false | Boolean | N/A |3
| vertical | Shadow Vertical Offset | | Int | ∞ |0
| horizontal | Shadow Horizontal Offset | | Int | ∞ |0
| blur | Shadow Blur | | Int | ∞ |.4
| opacity | Shadow Opacity | | Float | 0-1 |#000000
| color | Shadow Color | | String | 0-1 |
#### Example
`javascript`
isShadow
shadow={{
inset: true,
vertical: 2,
horizontal: 2,
blur: 4,
opacity: .4,
color: '#000000'
}}
/>
| Names | Description | Default Value | Type | Range/Max
| ------ | ------ | ------ | ------ | ------ |
| inset | Set Shadow Inset or Outset | false | Boolean | N/A |3
| vertical | Shadow Vertical Offset | | Int | ∞ |0
| horizontal | Shadow Horizontal Offset | | Int | ∞ |0
| blur | Shadow Blur | | Int | ∞ |.4
| opacity | Shadow Opacity | | Float | 0-1 |#000000
| color | Shadow Color | | String | 0-1 |
#### Example
`javascript`
isBgShadow
bgShadow={{
inset: true,
vertical: 2,
horizontal: 2,
blur: 4,
opacity: .4,
color: '#000000'
}}
/>
This callback function fires when the target element is in the viewport.
`javascript`
onViewport={elem => {
// console.log(elem)
}}
/>
`javascript
const defaultProps = {
size: 180,
borderWidth: 15,
borderBgWidth: 15,
fillColor: '#288feb',
emptyColor: '#dddddd',
background: 'none',
className: '',
percent: 55,
linecap: 'round',
isGradient: false,
gradient: {
angle: 0,
startColor: '#ff0000',
stopColor: '#ffff00',
},
isShadow: false,
shadow: {
inset: false,
vertical: 10,
horizontal: 0,
blur: 10,
opacity: .5,
color: '#000000'
},
isBgShadow: false,
bgShadow: {
inset: true,
vertical: 3,
horizontal: 0,
blur: 3,
opacity: .4,
color: '#000000'
},
viewport: true
}
``