README

Yet Another React Circular Progress

Yes! Another circular progress for React, but only because I couldn't find all I wanted in the exisiting solutions.

How is this one different?

Use Aphrodite to generate dynamic styles based on the props
Support for react 15 and 16
Use only transform css property for the animations
No SVG animations with weird bugs
Is under 3k gzipped
Really nice UX
Animation for the numbers
Very customizable (see examples)

Screenshot

React Circular Progress

Demos

https://tomsarduy.github.io/react-circular-progress/

Install

Work in progress

Installing without npm or yarn

If you want to customize the component or simply add it as part of your repository, just copy/paste src/index.js and src/index.styles.js into your project if you are already using Aphrodite.

Usage

Import the component:

import ProgressTracker from 'react-yet-another-progress-bar';
Render and pass props:

<ProgressTracker progress={percentageValue} />

Running this repo locally

Clone the repo
Run npm install
Run npm start

Structure

The basic structure of the project is given in the following way:

├── demo/
│   ├── dist
│   │    ├── index.html
│   │    ├── demo.js
│   │    ├── demo.js.map
│   │    ├── manifiest.js
│   │    └── manifiest.js.map
│   └── src
│        ├── index.js
│        └── index.styles.js
├── lib/
│   ├── index.js
│   └── index.styles.js
├── src/
│   ├── index.js
│   └── index.styles.js
├── es/
│   ├── index.js
│   └── index.styles.js
├── .eslintrc.js
├── .travis.yml
├── .gitignore
├── nwb.config.js
├── CONTRIBUTING.md
├── package.json
├── package-lock.json
├── LICENSE
└── README.md

yet-another-react-circular-progress

Usage no npm install needed!