react-semicircle-progressbar

A semicircle progress bar for React applications.

Installation

Use the package manager npm to install react-semicircle-progressbar.

npm install react-semicircle-progressbar

Usage

import React from 'react';
import SemiCircleProgress from 'react-semicircle-progressbar';

function App() {
  return (
    <div>
      <SemiCircleProgress
        percentage={80}
        size={{
          width: 200,
          height: 200,
        }}
        strokeWidth={10}
        strokeColor="#f00"
      />
    </div>
  );
}

export default App;

Props

| Property | Type | Description | | ------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------- | | strokeWidth | number | The width of the progress bar line in pixels | | strokeLinecap | "butt" | "round" | "square" | The type of end cap for the progress bar line ("butt", "round", or "square") | | percentage | number | The percentage of the progress bar filled | | percentageSeperator| string | The separator to use between the percentage and label text (default is "of") | | size | { width: number, height: number } | The size of the progress bar in pixels | | strokeColor | string | The color of the progress bar line in CSS | | fontStyle | { fontSize: string, fontFamily: string, fontWeight: string, fill: string } | The style of the label text | |hasBackground | boolean | The background of the progress bar | |bgStrokeColor | string | The color of the progress bar background line in CSS |

License

MIT