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

Question

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

Answer 1

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.

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