react-dashed-progress

> A React.js component to draw circular progress bar

Examples

- To check out live examples visit https://dmitrymorozoff.github.io/react-dashed-progress/

Getting started

Install react-dashed-progress using npm.

$3

You can also test the components locally by cloning this repo and doing the following steps:

NPM-scripts

Install dependencies from package.json:

$3

Runs the app in the development mode.

Open http://localhost:1234 to view it in the browser.

$3

Run linter

$3

Start tests followed by jest

$3

Usage

``jsx
import React from "react";
import ReactDOM from "react-dom";
import { DashedProgress } from "react-dashed-progress";

export class App extends React.Component {
render() {
return (

);
}
}

ReactDOM.render(, document.getElementById("root"));
`

Props

| Props | Type | Default |
| --------------- | :------------------------- | --------- |
| size | Number | 160 |
| barWidth | Number | 18 |
| countBars | Number | 30 |
| trailThickness | Number | 3 |
| strokeThickness | Number | 5 |
| value | Number | 0 |
| strokeLinecap | "butt", "square" , "round" | "round" |
| trailColor | String | #354A5E |
| strokeColor | String | #41B883 |
| showTooltip | Boolean | true |
| tooltipSize | Number | 32 |
| tooltipColor | String | #354A5E` |

Todo

- [ ] Animation
- [ ] Accessibility

Contributing

- For bugs and feature requests, please create an issue
- Lint and test your code
- Pull requests and ⭐ stars are always welcome

License

MIT