1.0.0 • Published 2 years ago
react-progressbar-semicircle-visio v1.0.0
react-progressbar-semicircle
Progress bar component in the shape of a semicircle - Try it out!
Install
npm install --save react-progressbar-semicircle
Usage
import React, { Component } from "react";
import SemiCircleProgressBar from "react-progressbar-semicircle";
class Example extends Component {
render() {
return <SemiCircleProgressBar percentage={33} showPercentValue />;
}
}
API
Property | Description | Type | Required | Default |
---|---|---|---|---|
stroke | Color of the progress bar | string | false | #02B732 |
strokeWidth | Width of the progress bar | number | false | 10 |
background | Background color for the progress bar | string | false | #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.
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
1.0.0
2 years ago