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