0

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

Arpit
  • 1,423
  • 1
  • 17
  • 20
  • Implement the class component with a state and timer which will be increasing the state's property every time you want a progress bar to move. You can find simple example of timer here https://reactjs.org/docs/state-and-lifecycle.html – sbqq Dec 01 '18 at 11:20

2 Answers2

1

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

Otani Shuzo
  • 1,118
  • 1
  • 11
  • 22
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.

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

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • How can I use tooltip also in this progress bar, If my progress bar is on 50% and I move mouse there then hover tooltip should show like this google chart http://lnnk.in/jCg – Arpit Jan 09 '19 at 08:09
  • I'm not a tooltip expert. Our component library I use at work is proprietary. But I think you can use any kind of tooltip. For example: https://www.w3schools.com/howto/howto_css_tooltip.asp – Peter Ambruzs Jan 09 '19 at 09:23