Skip to content
Renders a svg circle + progress, it just works πŸ’˜
TypeScript HTML
Branch: master
Clone or download


react-circle Build Status

Renders a svg circle + percentage. It just works


Install πŸš€

$ yarn add react-circle

Usage ⛏

Basic πŸ™ƒ

ReactCircle is opinionated and comes with default size and colors, just pass the progress prop to get them:

import Circle from 'react-circle';


Custom πŸ’…

Optionally, you can pass the following props and customize it as your will

import Circle from 'react-circle';

// All avaliable props for customization(illustrated by default values):
// Details are ordered as: `<Type>: <Description>`
  animate={true} // Boolean: Animated/Static progress
  animationDuration="1s" // String: Length of animation
  responsive={false} // Boolean: Make SVG adapt to parent size
  size="100" // String: Defines the size of the circle.
  lineWidth="25" // String: Defines the thickness of the circle's stroke.
  progress="0" // String: Update to change the progress and percentage.
  progressColor="rgb(76, 154, 255)" // String: Color of "progress" portion of circle.
  bgColor="#ecedf0" // String: Color of "empty" portion of circle.
  textColor="#6b778c" // String: Color of percentage text color.
    font: 'bold 4rem Helvetica, Arial, sans-serif' // CSSProperties: Custom styling for percentage.
  percentSpacing={10} // Number: Adjust spacing of "%" symbol and number.
  roundedStroke={false} // Boolean: Rounded/Flat line ends
  showPercentage={true} // Boolean: Show/hide percentage.
  showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.


You can’t perform that action at this time.