https://github.com/superraytin/react-simple-circular-progress

A simple circular progress indicator component for React
https://github.com/superraytin/react-simple-circular-progress

Last synced: about 2 months ago
JSON representation

A simple circular progress indicator component for React

• Host: GitHub
• URL: https://github.com/superraytin/react-simple-circular-progress
• Owner: superRaytin
• License: mit
• Created: 2024-12-02T01:51:25.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-12-02T02:38:07.000Z (6 months ago)
• Last Synced: 2025-04-03T12:56:25.636Z (about 2 months ago)
• Language: TypeScript
• Size: 233 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-simple-circular-progress

A simple circular progress indicator component for React

[![NPM version][npm-image]][npm-url]

[![Downloads][downloads-image]][npm-url]

[npm-url]: https://npmjs.org/package/react-simple-circular-progress

[downloads-image]: http://img.shields.io/npm/dm/react-simple-circular-progress.svg

[npm-image]: http://img.shields.io/npm/v/react-simple-circular-progress.svg

[React Native implementation of react-simple-circular-progress](https://github.com/superRaytin/react-native-simple-circular-progress)

## Screenshots

![](examples/images/screenshot.png)

## Installation

```

yarn add react-simple-circular-progress

```

or

```

npm i react-simple-circular-progress

```

## Examples

```jsx

  


    Scores

    5846

  


```

![](examples/images/demo1.png)

```jsx

  


    41%

  


```

![](examples/images/demo2.png)

```jsx

  


    Status

    Good

  


```

![](examples/images/demo3.png)

`circular-progress-content` styles:

```css

.circular-progress-content: {

  position: absolute;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

```

## API

| prop      | type  | default value |

| --------- | ------------- | ------------- |

| `size`    | `number` |     |

| `percent` | `number` | 1 |

| `gapAngle` | `number` | 90 |

| `backgroundBarColor` | `string` | '#F5F5F4' |

| `progressBarWidth` | `number` | 15 |

| `progressBarColor` | `string` `[number, string][]` | '#2C40F3' |

| `progressBarOpacity` | `number` | 1 |

| `progressFillColor` | `string` | 'none' |

| `scaleAngles` | `number[]` |  |

| `scaleWidth` | `number` | 2 |

| `scaleColor` | `string` | '#2a2a2a' |

| `scaleOpacity` | `number` | 0.1 |

| `svgExtraProps` | `Record` | {} |