react-circular-progressbar

What is react-circular-progressbar?

The react-circular-progressbar package is a React component library for creating customizable circular progress bars. It allows developers to easily display progress in a circular format with various customization options such as colors, text, and styles.

What are react-circular-progressbar's main functionalities?

Basic Circular Progress Bar

This feature allows you to create a basic circular progress bar. The `value` prop specifies the progress percentage.

import React from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar value={66} />
  </div>
);

export default MyComponent;

Customizable Styles

This feature allows you to customize the styles of the circular progress bar, including text color, path color, and trail color.

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar 
      value={66} 
      styles={buildStyles({
        textColor: 'red',
        pathColor: 'turquoise',
        trailColor: 'gold'
      })}
    />
  </div>
);

export default MyComponent;

Adding Text Inside the Progress Bar

This feature allows you to add text inside the circular progress bar. The `text` prop can be used to display any text, such as the progress percentage.

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar 
      value={66} 
      text={`${66}%`} 
      styles={buildStyles({
        textColor: 'black',
        pathColor: 'blue',
        trailColor: 'gray'
      })}
    />
  </div>
);

export default MyComponent;

Animation

This feature allows you to add animation to the circular progress bar. The `pathTransitionDuration` prop controls the duration of the animation.

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar 
      value={66} 
      styles={buildStyles({
        pathTransitionDuration: 0.5
      })}
    />
  </div>
);

export default MyComponent;

Other packages similar to react-circular-progressbar

react-progressbar.js

react-progressbar.js is a React wrapper for ProgressBar.js, a library for creating animated progress bars. It supports both linear and circular progress bars and offers a variety of customization options. Compared to react-circular-progressbar, it provides more advanced animation capabilities and supports multiple types of progress bars.

react-sweet-progress

react-sweet-progress is a React component for creating beautiful progress bars with customizable styles and animations. It supports both linear and circular progress bars. Compared to react-circular-progressbar, it offers more visually appealing default styles and additional customization options.

react-step-progress-bar

react-step-progress-bar is a React component for creating step-based progress bars. It supports both linear and circular progress bars and allows for detailed customization of each step. Compared to react-circular-progressbar, it is more focused on step-based progress visualization and offers more granular control over each step's appearance.

README

React Circular Progressbar

A circular progress indicator component, built with SVG. Easily customizable with CSS. See a live demo.

Installation

Install the npm module:

npm install react-circular-progressbar

Important: you'll also need to copy src/styles.css into your repo to use the default styling!

Usage

Import the component:

import CircularProgressbar from 'react-circular-progressbar';

..and use the component in your JSX:

<CircularProgressbar percentage={60} />

Props

Name	Description
percentage	Numeric percentage to display, from 0-100. Required.
className	Classes to apply to the svg element
strokeWidth	Width of circular line as a percentage relative to total width of component. Default: 8.
background	Whether to display background color. Default: false.
backgroundPadding	Padding between background and edge of svg as a percentage relative to total width of component. Default: 0.
initialAnimation	Toggle whether to animate progress starting from 0% on initial mount. Default: false.
classForPercentage	Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: (percent) => percent < 100 ? 'incomplete' : 'complete'.
textForPercentage	Function which returns text to display, can be configured based on percentage. Example: (pct) => `${pct}%` .

See the demo page JSX to see code used on the live demo page.

Customizing styles

Use plain CSS to customize the styling - the default CSS is a good starting point, but you can modify it as needed. There are CSS hooks for the path, trail, and text of the progressbar which you can customize, e.g.:

.CircularProgressbar-path { stroke: red; }
.CircularProgressbar-trail { stroke: gray; }
.CircularProgressbar-text { fill: yellow; }
.CircularProgressbar-background { fill: green; }

You can also use the className prop to add different classes to the top-level SVG element, and then use that to add different themes to different instances, e.g.:

<CircularProgressbar percentage={25} className="progressbar-red" />
<CircularProgressbar percentage={25} className="progressbar-blue" />

.progressbar-red .CircularProgressbar-path { stroke: red; }
.progressbar-blue .CircularProgressbar-path { stroke: blue; }

Development

To run demo locally on localhost:8080:

npm install
npm start

Keep CI tests passing by running npm test and npm run lint often.

Changelog

0.4.0

• Add background prop, fix black circle issue for upgrading without new CSS