JS Progress Bar not working


Why isn’t the green progress bar increasing width from 1 to 100%?

CSS needs units (is it px, em, rem, vw, vh, percents etc.)

width: 1%;

It’s still not increasing to the right as progress increments.

In js it’s still unitless

elem.style.width = width++;

How do I tell JS to increment the CSS width by 1%?

elem.style.width = `${width++}%`;

I tweaked the code and this is what I have now

    elem.innerHTML = progress + "%"; //percentage
    elem.style.width = "${progress++}%"; //update progress value percentage

The JS code has completely stopped working. It won’t increment progress or width. What is going on? Can I please have a detailed explanation?

You should be using template literals. You need to be using back-ticks not quotation marks.

elem.style.width = `${progress++}%`;

hi friend try this code it will incress the progress bar width 1% in 1 second
var progress=document.getElementById(“myProgress”);
var myBar=document.getElementById(“myBar”);
function progressEvolution(a){
myBar.style.width=a+"%" ;
var width=0;
if(width >= 100){

Thanks, it’s working now.