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

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

Answer 2

Horizontal Example
Here is how to do it.
make 2 divs(container, progressing one)
you can change the height of progressing div based on state change.
const styled = styled.default;
const Bar = styled.div`
position: relative;
height: 500px;
width: 100%;
border-radius: 3px;
border: 1px solid #ccc;
margin: 1rem auto;
`
const Fill = styled.div`
background: #0095da;
width: 100%;
border-radius: inherit;
transition: height 0.2s ease-in;
height: ${(props) => `${props.percentual}%`};
`
const ProgressBar = ({ percentage }) => {
return (
<div>
<Bar>
<Fill percentage={percentage} />
</Bar>
</div>
);
}
ReactDOM.render(<ProgressBar percentage={you state for progress percentage} />, document.getElementById('bar'));
you don't even need react for that tho.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js