How can I make the bar run through in 1 second ? in html css and javascript

B34Rocky 0
Viewed 61

I'm working on a progress bar (in Javascript) that cycles through every second and then starts again.

I tried to change value with setInteval() but nothing helped me.

I hope for help, thanks

here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress {
            position: relative;
            width: 510px;
            height: 60px;
            background: #9cbab4;
            overflow: hidden;
          
        }
        .progress__fill {
            width: 0%;
            height: 100%;
            background: #009579;
            transition: all 0.1s;
        }

        .progress__text{
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            font: bold 20px 'Quicksand', sans-serif;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="progress">
        <div class="progress__fill"></div>
        <span class="progress__text">0%</span>
    </div>
    <script>
        setInterval(function(){
            value++;
        }, 1000);
        function updateProgressBar(ProgressBar, value){
            ProgressBar.querySelector(".progress__fill").style.width = '${value}%'
            ProgressBar.querySelector(".progress__text").textContent = '${value}%'
        }
    </script>
</body>
</html> ```
progress-bar setinterval javascript css html
4 Answers

I tried reproducing your code by changing the progress, progress__fill, and progress__text into id's and changed the <div class="__" /> into <div id="__" />:

<style>
    #progress {
        position: relative;
        width: 510px;
        height: 60px;
        background: #9cbab4;
        overflow: hidden;
      
    }
    #progress_fill {
        width: 0%;
        height: 100%;
        background: #009579;
        transition: all 0.1s;
    }

    #progress_text{
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        font: bold 20px 'Quicksand', sans-serif;
        color: #ffffff;
    }
</style>

here's the <div /> in my repro code:

<div id="progress">
    <div id="progress_fill"></div>
    <span id="progress_text">0%</span>
</div>

then on the <script>, You did not have a variable for value so I made one and set the value to zero: let value = 0; then concatenated it with '%'.

I used window.setInterval then changed the querySelector to document.getElementById because of the changes above.

here's what it looks like on the script tag:

<script>
 let value = 0;
 window.setInterval(function() {
   if (value != 100) {
     value++;
     document.getElementById("progress_fill").style.width = value + '%';
     document.getElementById("progress_text").textContent = value + '%';
   }
 }, 1000);  
</script>

I included an if (value != 100) to stop the cycle when it reaches 100.

Hope this helps! here's my code snippet if you want some reference: https://jsbin.com/xiwiyew/5/edit?html

Yrll0

First of all you have to understand that variables have a scope limitations, so what you can do is get value from your innerHTML and update it in each function call. this way you can get realtime value, without storing it somewhere globally.

Here is the working code for the same.

setInterval(function () {
  const progress__text = document.querySelector(".progress__text");
  const progress__fill = document.querySelector(".progress__fill");
  if (progress__text && progress__fill) {
    let value = parseInt(progress__text.innerHTML.split("%")[0]);
    if (value === 100) {
      progress__fill.style.width = "0%";
      progress__text.innerHTML = "0%";
    } else {
      progress__fill.style.width = ++value + "%";
      progress__text.innerHTML = ++value + "%";
    }
  }
}, 100);
.progress {
  position: relative;
  width: 510px;
  height: 60px;
  background: #9cbab4;
  overflow: hidden;
}

.progress__fill {
  width: 0%;
  height: 100%;
  background: #009579;
  transition: all 0.1s;
}

.progress__text {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  font: bold 20px "Quicksand", sans-serif;
  color: #ffffff;
}
<body>
  <div class="progress">
    <div class="progress__fill"></div>
    <span value="0" class="progress__text">0%</span>
  </div>

</body>

AyushPayasi0

I have taken you example and played around a bit. I have changed it up for I think suits better. Problem one was you did not call the updateProgressBar() in your interval. So it did not work.. I think the code speaks for itself. If you have a question let me know

My code. Note: you could chose to put the two lines in the update function and move them directly in the interval function. Also the function does not have a cap now. and will go above 100% if left running long enough. Hope this helps

        value = 0;
        setInterval(function() {
            value++;
            updateProgressBar(value);
        }, 1000);

        function updateProgressBar(value) {
            document.querySelector(".progress__fill").style.width = value + "%"
            document.querySelector(".progress__text").innerHTML = value + "%"
        }

Looking at your code I am geussing you are new. Try writing out/ describing what you want in your head and try have your code replicate that. Example: I want a progressbar with a value, that increments every second. (interval function tells that now). Than the logic that looks clunky/reads less easy can be put behind a function

userbK1910

This isn't an accurate way of timing a animation, but pretty simple to implement

const animation = {
  duration: 2, // animation length in seconds
  steps: 60,
  counter: 0,
  incrementCounter() {
    this.counter += ((1 / this.duration) * (this.steps / 1000) * 100);
    this.counter = Math.min(this.counter, 100)
  }
}

const draw = setInterval(updateAnimation, animation.steps);

function updateAnimation() {
  animation.incrementCounter();
  document.querySelector(".progress__fill").style.width = animation.counter + '%'
  document.querySelector(".progress__text").textContent = animation.counter + '%'
  if (animation.counter === 100) {
    animation.counter = 0;
    clearInterval(draw)
  };
}
.progress {
  position: relative;
  width: 510px;
  height: 60px;
  background: #9cbab4;
  overflow: hidden;
}

.progress__fill {
  width: 0%;
  height: 100%;
  background: #009579;
  transition: all 0.1s;
}

.progress__text {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  font: bold 20px 'Quicksand', sans-serif;
  color: #ffffff;
}
<div class="progress">
  <div class="progress__fill"></div>
  <span class="progress__text">0%</span>
</div>

Aliza0
Related