react-svg-circular-progressbar

A circular progress bar in React is a visual component built with SVG that displays the progress of a task or process in the form of a circle. It is often used to indicate the completion status of an operation or to show the progress of a loading task.

Installation

npm install react-svg-circular-progressbar
yarn add react-svg-circular-progressbar

Usage

import CircularProgressBar from "react-svg-circular-progressbar";

<CircularProgressBar
  size={100}
  progress={40}
  rotate={-90}
  trackWidth={4}
  trackColor="grey"
  indicatorWidth={4}
  indicatorColor="red"
  indicatorCap="round"
  className=""
>
  {children}
</CircularProgressBar>;

Props

| Name | Type | Default | Description | | ---------------- | -------- | --------- | ---------------------------------------- | | size | number | 100 | Circle size | | progress | number | 40 | Progress value | | rotate | number | -90 | Progress circle rotation | | trackWidth | number | 4 | Track width | | trackColor | string | 'grey' | Track color | | indicatorWidth | number | 4 | Indicator width | | indicatorColor | string | 'red' | Indicator color | | indicatorCap | string | 'round' | Indicator line cap (round, square, butt) | | children | node | null | Children - Wrap HTML elements | | className | string | '' | Progress bar class name |