react-circular-progress-bar

React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG. IntersectionObserver support, the animation starts when the individual chart appears in the view.

Demo

See the demo - example

Install

1yarn add @tomik23/react-circular-progress-bar
2# or
3npm install @tomik23/react-circular-progress-bar

Usage

1import { CircularProgressBar } from "@tomik23/react-circular-progress-bar";

1// available control variables
2const props = {
3  percent: 60, // is require
4  colorSlice: "#00a1ff",
5  colorCircle: "#00a1ff",
6  fontColor: "#365b74",
7  fontSize: "1.6rem",
8  fontWeight: 400,
9  size: 200,
10  stroke: 10,
11  strokeBottom: 5,
12  speed: 60,
13  cut: 0,
14  rotation: -90,
15  opacity: 10,
16  fill: "#00897B",
17  unit: "%",
18  textPosition: "0.35em",
19  animationOff: false,
20  strokeDasharray: "10,1",
21  inverse: false,
22  round: false,
23  number: true,
24  linearGradient: ["#ffff00", "brown"]
25};
26
27<CircularProgressBar {...props} />;

Update percent

If you want to update component you have to add id to each of them

1const config = {
2  id: 0, // important
3  percent: 50,
4  colorSlice: "#E91E63"
5};
6
7function App() {
8  const [update, setUpdate] = useState(config);
9
10  useEffect(() => {
11    const interval = setInterval(() => {
12      setUpdate({
13        ...config,
14        id: 0, // we indicate which component we want to change
15        percent: Math.floor(Math.random() * 100 + 1)
16        colorSlice: "#000",
17        fontColor: "#F50057",
18        fontSize: "1.2rem",
19        fontWeight: 700
20      });
21    }, 3000);
22    return () => clearInterval(interval);
23  }, []);
24
25  const newObject = { ...config, ...update };
26
27  return (
28    <div>
29      <CircularProgressBar {...newObject} />
30    </div>
31  );
32}

Add photos and text

1const config = {
2  percent: 55,
3  colorSlice: "#E91E63",
4  colorCircle: "#f1f1f1",
5  fontWeight: 100,
6  number: false // turn off the percentage animation first
7};
8
9<CircularProgressBar key={index} {...props}>
10  <img
11    src="https://picsum.photos/100/100"
12    style={{
13      width: "60px",
14      borderRadius: "50%",
15      padding: "2px",
16      border: "3px solid salmon"
17    }}
18    alt="Random image"
19  />
20  <div style={{ textAlign: "center", padding: "0 35px" }}>
21    Lorem, ipsum dolor.
22  </div>
23</CircularProgressBar>;

Add photos and percent animation

1const config = {
2  percent: 55,
3  colorSlice: "#CDDC39",
4  colorCircle: "#f1f1f1",
5  fontWeight: 100,
6  fontSize: "1rem",
7  textPosition: "1.5em" // needed element to move the percentage animation lower
8};
9
10<CircularProgressBar key={index} {...props}>
11  <img
12    src="https://picsum.photos/100/100"
13    style={{
14      width: "60px",
15      borderRadius: "50%",
16      marginTop: "-40px",
17      padding: "2px",
18      border: "3px solid salmon"
19    }}
20    alt="Random image"
21  />
22</CircularProgressBar>;

How to turn off % or style them?

Turning off the percentage and leaving the number alone is very simple. Each percent (%) has a class of circular-unit-x of course you must add for each circle id. If you don't do this, the class will always be circular-unit-0. Just add .circular-unit-x { display: none } to our styles. Digit animation remains but percent sign [%] disappears.

You can also style this elements to create your own styles, example below:

1.circular-unit-15 {
2  fill: #f50057;
3  font-size: 0.8rem;
4  font-weight: 700;
5}

Instead of adding styles to a component, you can add them in the configuration stage.

1const examples = [
2  {
3    percent: 75,
4    styles: {
5      borderRadius: "50%",
6      boxShadow: "inset 0 0 25px 10px #a2caff"
7    }
8  }
9];
10
11{examples.map((props, index) => {
12  return <CircularSection key={index} {...props} />;
13})}

See an example Minimal Width Shadow

Configuration of the plugin

props	type	default	require	description
percent	number		✔	Represents the progress bar and animation of the animation progress expressed by a number e.g. 65%
id	number			If you want to update a component, you need to add an id to each of them. Also when you want to display several components with different gradients - linearGradient
speed	number			Frame rate animation [fps]. Let's say you want the animation to be 60fps, just add the parameter speed: 60
animationOff	boolean	false		Turn off the progress animation
animationSmooth	string	``		The transition property allows you to create animations (a smooth transition effect), e.g. 500ms ease-out
colorSlice	string	'#00a1ff'		Progress layer color and background "#ffff00","brown" *
colorCircle	string	'#00a1ff'		Bottom circle color Font "#ffff00","brown" *
stroke	number	10		Stroke width, chart thickness
strokeBottom	number	10		If "strokBottom" is set, it is used to generate a background circle size
round	boolean	false		Path rounding
inverse	boolean	false		Counterclockwise animation
opacity	number	10		Opacity box-shadow, 10 = 1, 9 = 0.9 ... 1 = 0.1
rotation	number	-90		Chart rotation
number	boolean	true		Add props number and set to false to hide the number with percent
size	number	200		Size progress bar width and height in px
cut	number	0		Angle of the circle sector
unit	string	%		Different unit instead of percentage (%) inside the circle
fill	string	none		Inner circle color
strokeDasharray	string	``		It works only on the lowest circle and only on whole circles - stroke-dasharray
textPosition	string	0.35em		The position of the SVG TEXT element vertically
fontSize	string	1.6rem		Font size. The font can be shown in units rem, em, px ...
fontWeight	number	400		400, 600, ...
fontColor	string	'#365b74'		Font color "#ffff00","brown" *
linearGradient	array			Array of colors "lineargradient": "#ffff00","brown" *
styles	object			Possibility to add styles to parent div see example Minimal Width Shadow

Colors names

* See colors names

Browsers support

IE / Edge	Firefox	Chrome	Opera	Vivaldi
IE11+, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions