How to animate width depending on a changing variable-CodePudding

I'm currently trying to develop a progress bar which grows or shrinks depending on the number of inputs that aren't empty.

I've tried 2 solutions to animate the bar depending on the var percentage.

First one:

I've tried to write the transition style inline like this in App.js:

  <div className="progress-div" >
      <div style={{transition:"all 500ms",  width: `${progress}%`}} className="progress"/>
  </div>

and in the App.css:

 .progress-div {
    background-color:#E2E2F6;
    border-radius: .5rem;
  }
  
  .progress {
    background-color: #8B8CC7;
    height: 15px;
  }

Second one:

  <div className="progress-div" >
      <div style={{width: `${progress}%`}} className="progress"/>
  </div>

.progress-div {
    background-color:#E2E2F6;
    border-radius: .5rem;
  }
  
  .progress {
    background-color: #8B8CC7;
    height: 15px;
    transition: all 500ms
  }

Neither of those worked, I guess it won't because I'm giving the width in the inline code, but I don't know how I could pass the variable to the css file or have another way around to make it work.

CodePudding user response：

I've tried both of your solutions, both work on my sandbox HERE

The only thing that comes to my mind is incorrect "progress" variable value, please check that.