Progress bar, not behaving as expected

Here’s my github:

When I remove the max=‘100’ from the progress element , it looks better and behaves normally (I think) except the screenshot for my frontendmentor project shows the progress bar being at 100% completed .
Off course looking at github deployment it behaves and looks normal.

I’m not sure how to fix this? I want it to look normal for the screenshot, and off course it should behave as it should.

Thanks !

Edit to add lines that pertain to progress bar:
in html : 72
in scss: 171, 263
in JS : 167 (dataprogress).


1 Like

Hello @agate!

Your code from GitHub was used to create a codepen to try to understand your issue - feel free to amend it as necessary. After stripping all the styling, it looks like this:

<div class="progress">
    <progress min='0' value='89' max="100"></progress>


The only styling applied is the border.

What I am not sure about is what is not working. Intuitively, a progress bar must have a minimum value and a maximum value and the bar indicating a relative value between that minimum and maximum value range.

If the behaviour is other than expected the source must be elsewhere.

Your dataprogress function coerces some string values to a number values which is fine. Specifically, these values can be attributed to the id raised, in addition to the id total such that a value can be assigned to the total variable. Subsequently, the total value is used to drive the bar?

After updating the initial code in the codepen above with a little js, I was able to set the progress bar value using a slightly different approach. Check it out.

Does this help?

1 Like

That’s it , thank you!
I only needed to change this line:
$(data.progress).css('width', `${progressWidth}%` );

data.progress.value = progressWidth;
in dataProgress.

1 Like

Happy to help! Happy coding.