Polar - Animated Progress Bar

Live View

Loading...

Live Editor

function App() {
  const [state, setState] = React.useState({
    percent: 25,
    data: getData(0),
  });

  React.useState(() => {
    const setStateInterval = window.setInterval(() => {
      let percent = 25;
      percent += Math.random() * 25;
      percent = percent > 100 ? 0 : percent;
      setState({
        percent,
        data: getData(percent),
      });
    }, 2000);

    return () => {
      window.clearInterval(setStateInterval);
    };
  }, []);

  return (
    <div>
      <svg viewBox="0 0 400 400" width="100%" height="100%">
        <VictoryPie
          standalone={false}
          animate={{ duration: 1000 }}
          width={400}
          height={400}
          data={state.data}
          innerRadius={120}
          cornerRadius={25}
          labels={() => null}
          style={{
            data: {
              fill: ({ datum }) => {
                const color = datum.y > 30 ? "green" : "red";
                return datum.x === 1 ? color : "transparent";
              },
            },
          }}
        />
        <VictoryAnimation duration={1000} data={state}>
          {(newProps) => {
            return (
              <VictoryLabel
                textAnchor="middle"
                verticalAnchor="middle"
                x={200}
                y={200}
                text={`${Math.round(newProps.percent)}%`}
                style={{ fontSize: 45 }}
              />
            );
          }}
        </VictoryAnimation>
      </svg>
    </div>
  );
}

function getData(percent) {
  return [
    { x: 1, y: percent },
    { x: 2, y: 100 - percent },
  ];
}

render(<App />);