Why the width: 0% is not working

[ARQSoft]

So, I am doing some experiments before building up my music player this is what I got into it I know I might be doing some silly mistake but here is the problem.

As you can see I have set the width of progress_status as 0% but it is not working
The code in HTML is as follow:

  <div id="progress_bar">
            <div id="progress_status"></div>
        </div>

I checked on dev tools to see If some style is overriding but that is not case at least i can’t find it

Here is the link of the Code

[jsdisco]

It’s unlikely that someone’s going to figure it out just by looking at a screenshot, can you post your code instead, or (even better) a link to an online playground like https://codepen.io?

[Sylvant]

what are you trying to achieve?

[ARQSoft]

Code Here is the Code Link. I have also posted the JS code just in case…

[ARQSoft]

Well i am trying to recreate the ProgressBar

[lasjorg]

It’s the padding. Instead of using padding you can set a height.

#progress_bar {
  margin: 0 auto;
  width: 50vw;
  border: 1px solid white;
  border-radius: 0.3vw;
  height: 25px;
}

#progress_status {
  width: 0%;
  background-color: rgba(19, 40, 204, 0.6);
  border-radius: 0.3vw;
  height: 100%;
}

[jsdisco]

Thanks. I’m not sure what exactly the problem is, but if you’re referring to the fact that the progress-status is visible even if the width is 0: That’s because it has a padding.

Removing the padding will collapse the progress-bar, so I’d give that a height of a few pixels.

EDIT what @lasjorg said.