CODEWITHSUNDEEP
reactjsreact-transition-groupreact-motionreact-spring
Arpit
Arpit

Reputation: 1495

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

Upvotes: 0

Views: 6366

Answers (2)

Peter Ambruzs
Peter Ambruzs

Reputation: 8223

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

Upvotes: 1

Otani Shuzo
Otani Shuzo

Reputation: 1238

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

Upvotes: 1

Related Questions