Increase width in% and not in px

0

How do I increase widht with%? It put this code I made, it increases, but it's in px, and I wanted it to increase in percentage.

var progressBar = $(".progress-bar");

setInterval(addProgress, 1000);

function addProgress() {
    var width = progressBar.width() + 10;
    if(progressBar.width() <= 100%) {
        progressBar.width(width);
    }
}

You can see that that% w / o% there, is not right, of the error. How do I do this?

    
asked by anonymous 26.06.2017 / 18:44

2 answers

2

You can also do the same thing using CSS.

.progress-bar {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 40px;
  padding: 5px;
  transform: translate(-50%, -50%);
  border: 5px solid gainsboro
}

.progress-value {
  height: 100%;
  background-color: teal;
  animation: progress 5s linear forwards;
}

@keyframes progress {
    from { width: 0%; }
    to { width: 100%; }
}
<div class="progress-bar">
  <div class="progress-value"></div>
</div>

You just need to adjust the tempo of your animation, in the example above it is in 5 seconds.

    
26.06.2017 / 19:05
1

Functional example using% removed from w3school

If you need it in progress you can comment that I edit the answer.

function move() {
    var elem = document.getElementById("myBar"); 
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
#myProgress {
    width: 100%;
    background-color: grey;
}
#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
}
<div id="myProgress">
  <div id="myBar"></div>
</div>
<input type="button" value="carregar" onclick="move()">
    
26.06.2017 / 18:53