Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/prasannamestha/react-gradient-progress

Simple light circular progress bars in react with gradient.
https://github.com/prasannamestha/react-gradient-progress

Last synced: 11 days ago
JSON representation

Simple light circular progress bars in react with gradient.

Host: GitHub
URL: https://github.com/prasannamestha/react-gradient-progress
Owner: prasannamestha
Created: 2019-08-13T09:47:28.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-03-24T10:19:27.000Z (8 months ago)
Last Synced: 2024-10-06T16:38:49.997Z (about 1 month ago)
Language: JavaScript
Size: 1.14 MB
Stars: 92
Watchers: 3
Forks: 15
Open Issues: 21
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# React Gradient Progress

> Simple and light gradient-enabled circular progressbar for reactjs/nextjs

![React Gradient Progress](https://miro.medium.com/max/875/1*6eFjvxycuyCzO-jui0d6Dw.png)

[![NPM](https://img.shields.io/npm/v/react-gradient-progress.svg)](https://www.npmjs.com/package/react-gradient-progress) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Installation

Using npm

```bash
npm i -s react-gradient-progress
```

## Basic Usage

```javascript
import {CircleProgress} from 'react-gradient-progress'

```

## Props

| Name | Description |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `percentage` | Percentage progress. Required. |
| `width` | Width of the progressbar container in px. Default: `200`. |
| `strokeWidth` | The stroke width of the progress bar. Default: `5`. |
| `strokeLinecap` | Stroke linecap type. Default: `'round'`. Accepted values: 'butt', 'round', 'square' |
| `fontSize` | The size of the percentage text. Default: `'30px'`. |
| `fontColor` | The color of the font. Default: `'inherit'`. |
| `fontFamily` | Font family. Default: `inherit`. |
| `primaryColor` | The Gradient color. Should be an array of size 2. Default: `['#00BBFF', '#92d7f1']`. |
| `secondaryColor` | The color of the uncovered percentage. Default: `'transparent'`. |
| `fill` | Color to fill in the progressbar. Default: `'transparent'`. |

## Read more
[https://medium.com/better-programming/build-beautiful-gradient-enabled-circular-progress-bars-in-react-d0a746deed0](https://medium.com/better-programming/build-beautiful-gradient-enabled-circular-progress-bars-in-react-d0a746deed0)

## Buy me a coffee if you like this repo
[![Send me a tip](https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png)](https://www.buymeacoffee.com/prasanna)

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)