Skip to content

Latest commit

 

History

History
55 lines (43 loc) · 2.53 KB

README.md

File metadata and controls

55 lines (43 loc) · 2.53 KB
Raw

react-semicircle-progressbar

A semicircle progress bar for React applications.

alt text

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