Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@alptugidin/react-circular-progress-bar
Advanced tools
Readme
A customizable circular progress bar for React.
Demo
npm install @alptugidin/react-circular-progress-bar
or
yarn add @alptugidin/react-circular-progress-bar
import {Flat, Heat, Nested} from '@alptugidin/react-circular-progress-bar'
<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
}}
/>
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. |
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
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
}}
/>
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. |
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
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
}}
/>
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. |
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 . |
MIT Alptuğ İdin
FAQs
A customizable circular progress bar for React.
The npm package @alptugidin/react-circular-progress-bar receives a total of 320 weekly downloads. As such, @alptugidin/react-circular-progress-bar popularity was classified as not popular.
We found that @alptugidin/react-circular-progress-bar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.