reactjsreact-transition-groupreact-motionreact-spring

How to show Vertical Progress Bar in react-transition-group with animation

Here is a jQuery example for a progress bar animation. and I want this feature in Reactjs without jQuery. How to implement this feature.

enter image description here

Solution

  • I hope you are still interested in this question. I just tinker with react-spring and I really love it. The best animation library in React IMHO.

    You can create a neat component with the Spring component. It will always animate to the to property of the Spring component. First time from the from value of the from property.

    enter image description here

    import React from "react";
import { Spring } from "react-spring";

const VerticalProgress = ({ progress }) => {
  return (
    <Spring from={{ percent: 0 }} to={{ percent: progress }}>
      {({ percent }) => (
        <div className="progress vertical">
          <div style={{ height: `${percent}%` }} className="progress-bar">
            <span className="sr-only">{`${progress}%`}</span>
          </div>
        </div>
      )}
    </Spring>
  );
};

export default VerticalProgress;

    Here is the complete code: https://codesandbox.io/s/mqo1r9wo4j