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

1import React from 'react';
2import Progress from '@delowar/react-circle-progressbar';
3
4// Basic Usage
5<Progress percent={40}/>
6
7// with children 
8<Progress percent={40}>40%</Progress>
9
10// Default Gradient
11<Progress isGradient />
12
13// Customize Gradient
14<Progress 
15    isGradient 
16    gradient={{
17        angle: 90,
18        startColor: '#ff0000',
19        stopColor: '#ffff00'
20    }}
21/>
22
23// Default Shadow
24<Progress isBgShadow />   
25
26// Customize Shadow
27<Progress
28    isBgShadow 
29    bgShadow={{
30        inset: true,
31        vertical: 2,
32        horizontal: 2,
33        blur: 4,
34        opacity: .4,
35        color: '#000000'
36    }}
37    emptyColor="#f7f7f7" 
38    borderWidth="6"
39    borderBgWidth="30" 
40/>
41

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:

1<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:

1<Progress 
2    isGradient 
3    gradient={{
4        angle: 90,
5        startColor: '#ff0000',
6        stopColor: '#ffff00'
7    }}
8/>

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

1<Progress
2    isShadow 
3    shadow={{
4        inset: true,
5        vertical: 2,
6        horizontal: 2,
7        blur: 4,
8        opacity: .4,
9        color: '#000000'
10    }}
11/>

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

1<Progress
2    isBgShadow 
3    bgShadow={{
4        inset: true,
5        vertical: 2,
6        horizontal: 2,
7        blur: 4,
8        opacity: .4,
9        color: '#000000'
10    }}
11/>

Callback

This callback function fires when the target element is in the viewport.

1<Progress
2    onViewport={elem => {
3        // console.log(elem)
4    }} 
5/>

Default Props

1
2const defaultProps = {
3    size: 180,
4    borderWidth: 15,
5    borderBgWidth: 15,
6    fillColor: '#288feb',
7    emptyColor: '#dddddd',
8    background: 'none',
9    className: '',
10    percent: 55,
11    linecap: 'round',
12    isGradient: false,
13    gradient: {
14        angle: 0,
15        startColor: '#ff0000',
16        stopColor: '#ffff00',
17    },
18    isShadow: false,
19    shadow: {
20        inset: false,
21        vertical: 10,
22        horizontal: 0,
23        blur: 10,
24        opacity: .5,
25        color: '#000000'
26    },
27    isBgShadow: false,
28    bgShadow: {
29        inset: true,
30        vertical: 3,
31        horizontal: 0,
32        blur: 3,
33        opacity: .4,
34        color: '#000000'
35    },
36    viewport: true
37}