Increase width in % and not in px

Asked

Viewed 161 times

0

How do I increase the widht with %? You put this code that I did, 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 if there, not the right one, the wrong one. How do I do this?

javascript jquery progress-bar

  • Increase what? What is .progress-bar?

  • Ta seeing the progressionBar.width() + 10, this "10" will be in px, wanted it to be in %

  • Okay, young man. But percentage of what?

  • 2

    Rule of 3? var max = 15445; current var = XXXXX; progress_bar = (current * 100)/max;

  • Oxe '-' I think I was very explanatory, in case I wasn’t, sorry. But this. width() there in my code, will add +10 pixels in the width (Width) of the progressBar. Instead of adding 10pixels, I wanted to add 10% (ten percent)

  • Thank you Everson, how stupid of me. Thank you!

Show 1 more comment

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 time of your animation, in the above example is in 5 seconds.

  • Thank you very much Tobias, had never seen the Progress keyframes

1

Functional example using % taken from w3school

If you need to in Ogress you can comment that I edit the reply.

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()">

Browser other questions tagged javascript jquery progress-bar

You are not signed in. Login or sign up in order to post.