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