react-progressbar-semicircle

> Progress bar component in the shape of a semicircle - Try it out!

 !GZip Size

Install

``bash
npm install --save react-progressbar-semicircle
`

Usage

`jsx
import React, { Component } from "react";

import SemiCircleProgressBar from "react-progressbar-semicircle";

class Example extends Component {
render() {
return ;
}
}
`

!SemiCircleProgressBarWithPercentValue

API

| Property | Description | Type | Required | Default |
| ---------------- | ------------------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------ |
| stroke | Color of the progress bar | string | false | !#02B732 #02B732 |
| strokeWidth | Width of the progress bar | number | false | 10 |
| background | Background color for the progress bar | string | false | !#D0D0CE #D0D0CE |
| diameter | Diameter of the semicircle | number | false | 200 |
| orientation | Orientation of the semicircle. Supports 'up' and 'down' | string | false | 'up' |
| direction | Direction of the progressbar. Supports 'left' and 'right' | string | false | 'right' |
| percentage | Percentage to be drawn on the bar. Number between 0 - 100 | number | true |
| showPercentValue | Show percentage value as a number in the middle of semicircle | boolean | false | false |

Demo

This repo comes with an example create-react-app under example/ that can be run locally to experiment with the component. This demo is also hosted here.

`bash
cd example
npm install
npm start
``

This will start the create-react-app dev server locally on port 3000 and open the demo app in your default browser.

Credit

This library is bootstrapped with the use of Create-React-Library CLI

License

MIT © ThomasBem