react-progressbar-semicircle-visio

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