@tomik23/react-circular-progress-bar

react-circular-progress-bar

React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG and plain JavaScript.

Demo

See the demo - example

Install

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

Usage

import { CircularProgressBar } from '@tomik23/react-circular-progress-bar'

// available control variables
const props = {
  percent: 60, // is require
  colorSlice: '#00a1ff',
  colorCircle: '#00a1ff',
  fontColor: '#365b74',
  fontSize: '1.6rem',
  fontWeight: 400,
  size: 200,
  stroke: 10,
  strokeBottom: 5,
  opacity: 10,
  speed: 60,
  round: true,
  number: true,
  linearGradient: ["#ffff00", "brown"]
}

<CircularProgressBar {...props} />

Update percent

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

const config = {
  id: 0, // important
  percent: 50,
  colorSlice: '#E91E63',
}

function App() {
  const [update, setUpdate] = useState(config);

  useEffect(() => {
    const interval = setInterval(() => {
      setUpdate({
        ...config,
        id: 0, // we indicate which component we want to change
        percent: Math.floor(Math.random() * 100 + 1),
      });
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  const newObject = { ...config, ...update };

  return (
    <div>
      <CircularProgressBar {...newObject} />
    </div>
  );
}

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
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
strokrBottom	number	10		If "strokBottom" is set, it is used to generate a background circle size
round	boolean	false		Path rounding
speed	number	60		Animation speed, 60fps by default
opacity	number	10		Opacity box-shadow, 10 = 1, 9 = 0.9 ... 1 = 0.1
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
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" *

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