A customizable circular progress bar for React.
Demo
Installation
npm install @alptugidin/react-circular-progress-bar
or
yarn add @alptugidin/react-circular-progress-bar
Import
import {Flat, Heat, Nested} from '@alptugidin/react-circular-progress-bar'
Usage
Flat
<Flat
progress={50}
range={{ from: 0, to: 100 }}
sign={{ value: '%', position: 'end' }}
text={'Match'}
showMiniCircle={true}
showValue={true}
sx={{
strokeColor: '#ff0000',
barWidth: 5,
bgStrokeColor: '#ffffff',
bgColor: { value: '#000000', transparency: '20' },
shape: 'full',
strokeLinecap: 'round',
valueSize: 13,
valueWeight: 'bold',
valueColor: '#000000',
valueFamily: 'Trebuchet MS',
textSize: 13,
textWeight: 'bold',
textColor: '#000000',
textFamily: 'Trebuchet MS',
loadingTime: 1000,
miniCircleColor: '#ff0000',
miniCircleSize: 5,
valueAnimation: true,
intersectionEnabled: true
}}
/>
Props
| Prop name | Type | Required | Description |
|---|
| progress | number | Yes | The progress value of the progress bar, ranging from 0 to 100. |
| range | object | No | An object containing the from and to values for the progress bar. The default value is { from: 0, to: 100 }. |
| sign | object | No | An object containing the value and position for the sign displayed in the progress bar. The value can be a string, and the position can be either 'start' or 'end'. The default value is { value: '%', position: 'end' }. |
| text | string | No | The text displayed above the progress bar. |
| showMiniCircle | boolean | No | A flag indicating whether to show a mini circle at the end of the progress bar. The default value is true. |
| showValue | boolean | No | A flag indicating whether to show the progress value in the progress bar. The default value is true. |
| sx | object | No | An object containing CSS styles for customizing the appearance of the progress bar. |
Styling
| Property | Type | Description |
|---|
| barWidth | number | The width of the progress bar. |
| strokeColor | string | The color of the active progress bar. |
| bgStrokeColor | string | The color of the background progress bar. |
| bgColor | object | The color of the background progress bar. It has two properties: value: hex color and transparency: number between 00-99 (as string) |
| shape | string | The shape of the progress bar. Can be 'full', 'half' or 'threequarters'. |
| strokeLinecap | string | The line cap style of the progress bar. Can be 'butt', 'round', or 'square'. |
| valueSize | number | The font size of the progress value. |
| valueWeight | string | The font weight of the progress value. |
| valueColor | string | The color of the progress value. |
| valueFamily | string | The font family of the progress value. |
| textSize | number | The font size of the text above the progress bar. |
| textWeight | string | The font weight of the text above the progress bar. |
| textColor | string | The color of the text above the progress bar. |
| textFamily | string | The font family of the text above the progress bar. |
| loadingTime | number | The time it takes for the progress bar to animate from 0 to the specified progress value. |
| miniCircleColor | string | The color of the mini circle at the end of the progress bar. |
| miniCircleSize | number | The size of the mini circle at the end of the progress bar. |
| valueAnimation | boolean | A flag indicating whether to animate the progress value. |
| intersectionEnabled | boolean | A flag indicating whether to use an intersection observer to only start loading the progress bar when it becomes visible on the screen. The default value is true. |
Heat
<Heat
progress={50}
range ={{ from: 0, to: 100 }}
sign={{ value: '%', position: 'end' }}
showValue={true}
revertBackground={false}
text={'Match'}
sx={{
barWidth: 5,
bgColor: '#dadada',
shape: 'half',
valueSize: 13,
textSize: 13,
valueFamily: 'Trebuchet MS',
textFamily: 'Trebuchet MS',
valueWeight: 'normal',
textWeight: 'normal',
textColor: '#000000',
valueColor: '#000000',
loadingTime: 1000,
strokeLinecap: 'round',
valueAnimation: true,
intersectionEnabled: true
}}
/>
Props
| Prop | Type | Description |
|---|
| progress | number | The progress value of the progress bar, ranging from 0 to 100. |
| range | object | An object containing the from and to values for the progress bar. The default value is { from: 0, to: 100 }. |
| sign | object | An object containing the value and position for the sign displayed in the progress bar. The value can be a string, and the position can be either 'start' or 'end'. The default value is { value: '%', position: 'end' }. |
| showValue | boolean | A flag indicating whether to show the progress value in the progress bar. The default value is true. |
| revertBackground | boolean | A flag indicating whether to invert the colors of the progress bar. If true, the background color will start as red and gradually turn green as the progress value increases. The default value is false. |
| text | string | The text displayed above the progress bar. |
| sx | object | An object containing CSS styles for customizing the appearance of the progress bar. |
Styling
| Property | Type | Description |
|---|
| barWidth | number | The width of the progress bar. |
| bgColor | string | The background color of the progress bar. |
| shape | string | The shape of the progress bar. Can be 'full' or 'half'. |
| valueSize | number | The font size of the progress value. |
| textSize | number | The font size of the text above the progress bar. |
| valueFamily | string | The font family of the progress value. |
| textFamily | string | The font family of the text above the progress bar. |
| valueWeight | string | The font weight of the progress value. |
| textWeight | string | The font weight of the text above the progress bar. |
| textColor | string | The color of the text above the progress bar. |
| valueColor | string | The color of the progress value. |
| loadingTime | number | The time it takes for the progress bar to animate from 0 to the specified progress value. |
| strokeLinecap | string | The line cap style of the progress bar. Can be 'butt', 'round', or 'square'. |
| valueAnimation | boolean | A flag indicating whether to animate the progress value. |
| intersectionEnabled | boolean | A flag indicating whether to use an intersection observer to only start loading the progress bar when it becomes visible on the screen. The default value is true. |
Nested
<Nested
circles={[
{text: 'Javascript', value: 20, color: '#fde047'},
{text: 'Typescript' ,value: 50, color: '#0ea5e9'},
{text: 'HTML', value: 8, color: '#c2410c'},
{text: 'CSS', value: 12, color: '#7c3aed'},
{text: 'SASS', value: 10, color: '#c026d3'}
]}
sx={{
bgColor: '#cbd5e1',
fontWeight: 'bold',
fontFamily: 'Trebuchet MS',
strokeLinecap: 'round',
loadingTime: 1000,
valueAnimation: true,
intersectionEnabled: true
}}
/>
Props
| Prop | Type | Description |
|---|
| circles | array | An array of objects containing the properties for each circle in the nested progress bar. Each object should have a text string, a value number, and a color string. Must have at least two circles. Can be up to 5. |
| sx | object | An object containing CSS styles for customizing the appearance of the nested progress bar. |
Styling
| Property | Type | Description |
|---|
| bgColor | string | The background color of the nested progress bar. |
| fontWeight | string | The font weight of the text in the nested progress bar. |
| fontFamily | string | The font family of the text in the nested progress bar. |
| strokeLinecap | string | The line cap style of the circles in the nested progress bar. Can be 'butt', 'round', or 'square'. |
| loadingTime | number | The time it takes for the circles in the nested progress bar to animate from 0 to their specified values. |
| valueAnimation | boolean | A flag indicating whether to animate the values in the circles of the nested progress bar. |
| intersectionEnabled | boolean | A flag indicating whether to use an intersection observer to only start loading the nested progress bar when it becomes visible on the screen. The default value is true. |
Licence
MIT Alptuğ İdin