https://github.com/superraytin/react-native-circular-indicator

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

Last synced: 6 months ago
JSON representation

A simple circular progress indicator component for React Native

• Host: GitHub
• URL: https://github.com/superraytin/react-native-circular-indicator
• Owner: superRaytin
• License: mit
• Created: 2024-11-23T08:43:51.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-23T08:54:33.000Z (6 months ago)
• Last Synced: 2024-11-23T09:26:07.099Z (6 months ago)
• Language: TypeScript
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-circular-indicator

A simple circular progress indicator component for React Native

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

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

[npm-url]: https://npmjs.org/package/react-native-circular-indicator

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

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

## Screenshots

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

## Installation

```

yarn add react-native-circular-indicator

```

or

```

npm i react-native-circular-indicator

```

## Examples

```jsx

  

    Scores

    5846

  

```

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

```jsx

  

    41%

  

```

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

```jsx

  

    Status

    Good

  

```

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

## 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 |

| `svgProps` | `Record` | {} |