\r\n \r\n\r\n\r\n# Installation\r\n```bash\r\nnpm install @alptugidin/react-circular-progress-bar\r\n```\r\nor\r\n```bash\r\nyarn add @alptugidin/react-circular-progress-bar\r\n```\r\n\r\n# Import\r\n\r\n```javascript\r\nimport {Flat, Heat, Nested} from '@alptugidin/react-circular-progress-bar'\r\n```\r\n\r\n# Usage\r\n## Flat\r\n\r\n```jsx\r\n\r\n```\r\n## Props\r\n| Prop name | Type | Required | Description |\r\n|----------------|---------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| progress | number | Yes | The progress value of the progress bar, ranging from 0 to 100. |\r\n| range | object | No | An object containing the `from` and `to` values for the progress bar. The default value is `{ from: 0, to: 100 }`. |\r\n| 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' }`. |\r\n| text | string | No | The text displayed above the progress bar. |\r\n| showMiniCircle | boolean | No | A flag indicating whether to show a mini circle at the end of the progress bar. The default value is `true`. |\r\n| showValue | boolean | No | A flag indicating whether to show the progress value in the progress bar. The default value is `true`. |\r\n| sx | object | No | An object containing CSS styles for customizing the appearance of the progress bar. |\r\n\r\n## Styling\r\n| Property | Type | Description |\r\n|---------------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| barWidth | number | The width of the progress bar. |\r\n| strokeColor | string | The color of the active progress bar. |\r\n| bgStrokeColor | string | The color of the background progress bar. |\r\n| bgColor | object | The color of the background progress bar. It has two properties: `value`: hex color and `transparency`: number between 00-99 (as string) |\r\n| shape | string | The shape of the progress bar. Can be `'full'`, `'half'` or `'threequarters'`. |\r\n| strokeLinecap | string | The line cap style of the progress bar. Can be `'butt'`, `'round'`, or `'square'`. |\r\n| valueSize | number | The font size of the progress value. |\r\n| valueWeight | string | The font weight of the progress value. |\r\n| valueColor | string | The color of the progress value. |\r\n| valueFamily | string | The font family of the progress value. |\r\n| textSize | number | The font size of the text above the progress bar. |\r\n| textWeight | string | The font weight of the text above the progress bar. |\r\n| textColor | string | The color of the text above the progress bar. |\r\n| textFamily | string | The font family of the text above the progress bar. |\r\n| loadingTime | number | The time it takes for the progress bar to animate from 0 to the specified progress value. |\r\n| miniCircleColor | string | The color of the mini circle at the end of the progress bar. |\r\n| miniCircleSize | number | The size of the mini circle at the end of the progress bar. |\r\n| valueAnimation | boolean | A flag indicating whether to animate the progress value. |\r\n| 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`. |\r\n\r\n\r\n\r\n## Heat\r\n\r\n```jsx\r\n\r\n```\r\n## Props\r\n\r\n| Prop | Type | Description |\r\n| --- | --- | --- |\r\n| progress | number | The progress value of the progress bar, ranging from 0 to 100. |\r\n| range | object | An object containing the `from` and `to` values for the progress bar. The default value is `{ from: 0, to: 100 }`. |\r\n| 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' }`. |\r\n| showValue | boolean | A flag indicating whether to show the progress value in the progress bar. The default value is `true`. |\r\n| 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`. |\r\n| text | string | The text displayed above the progress bar. |\r\n| sx | object | An object containing CSS styles for customizing the appearance of the progress bar. |\r\n\r\n## Styling\r\n\r\n| Property | Type | Description |\r\n| --- | --- | --- |\r\n| barWidth | number | The width of the progress bar. |\r\n| bgColor | string | The background color of the progress bar. |\r\n| shape | string | The shape of the progress bar. Can be `'full'` or `'half'`. |\r\n| valueSize | number | The font size of the progress value. |\r\n| textSize | number | The font size of the text above the progress bar. |\r\n| valueFamily | string | The font family of the progress value. |\r\n| textFamily | string | The font family of the text above the progress bar. |\r\n| valueWeight | string | The font weight of the progress value. |\r\n| textWeight | string | The font weight of the text above the progress bar. |\r\n| textColor | string | The color of the text above the progress bar. |\r\n| valueColor | string | The color of the progress value. |\r\n| loadingTime | number | The time it takes for the progress bar to animate from 0 to the specified progress value. |\r\n| strokeLinecap | string | The line cap style of the progress bar. Can be `'butt'`, `'round'`, or `'square'`. |\r\n| valueAnimation | boolean | A flag indicating whether to animate the progress value. |\r\n| 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`. |\r\n\r\n\r\n\r\n## Nested\r\n\r\n```jsx\r\n\r\n```\r\n\r\n## Props\r\n| Prop | Type | Description |\r\n| --- | --- | --- |\r\n| 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.|\r\n| sx | object | An object containing CSS styles for customizing the appearance of the nested progress bar. |\r\n\r\n## Styling\r\n\r\n| Property | Type | Description |\r\n| --- | --- | --- |\r\n| bgColor | string | The background color of the nested progress bar. |\r\n| fontWeight | string | The font weight of the text in the nested progress bar. |\r\n| fontFamily | string | The font family of the text in the nested progress bar. |\r\n| strokeLinecap | string | The line cap style of the circles in the nested progress bar. Can be `'butt'`, `'round'`, or `'square'`. |\r\n| loadingTime | number | The time it takes for the circles in the nested progress bar to animate from 0 to their specified values. |\r\n| valueAnimation | boolean | A flag indicating whether to animate the values in the circles of the nested progress bar. |\r\n| 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`. |\r\n\r\n\r\n\r\n## Licence\r\n\r\n[MIT](https://choosealicense.com/licenses/mit/) Alptuğ İdin\r\n\r\n","readmeFilename":"README.md"}
![](\"https://badge.fury.io/js/@alptugidin%2Freact-circular-progress-bar.svg\"){kind=icon}
\r\n![\"npm\"](\"https://img.shields.io/npm/dm/@alptugidin/react-circular-progress-bar.svg\")
\r\n\r\n
\r\n