CODEWITHSUNDEEP
javascript
Ron
Ron

Reputation: 3

How do I remove setInterval from progress bar in Javascript and make appear the VerticalBar instantaneously?

I have the classical Progress bar in Javascript. I Would like to simply place the vertical bar without seeing it moving on the screen.

function progressbar() {
      var vertical_bar2 = document.querySelector("#P5 .vl5");
      var element = document.getElementById("myprogressBar");
      var ValueSet = 25
      var width = 0;
    
      document.getElementById("vl5").style.display='';
      document.getElementById("value2").style.display='';
      document.getElementById("value1").style.display='';
      var identity = setInterval(scene, 10);
    
      function scene() {
        if (width >= ValueSet) {
          clearInterval(identity);
        } else {
          width++;
          vertical_bar2.style.left = `${width}%`;
          document.getElementById("value2").innerHTML = ValueSet
        }
      }
    }

I am trying the following script but it is not working

function progressbar() {
      var vertical_bar2 = document.querySelector("#P5 .vl5");
      var element = document.getElementById("progressBar");
      var CE = 25
      var width = 0;
      document.getElementById("vl5").style.display='';
      document.getElementById("Value2").style.display='';
      document.getElementById("Value1").style.display='';
      vertical_bar2.style.left = 25;
      document.getElementById("Value").innerHTML = CE
    }

Upvotes: 0

Views: 61

Answers (1)

EssXTee
EssXTee

Reputation: 1798

Based on the code your provided, it looks like you just need to set a unit for the left property of your bar. Currently you are only setting a value (25), but without a unit (%, px, em, etc.) it will not apply anything.

vertical_bar2.style.left = "25%";

or

vertical_bar2.style.left = `${CE}%`;

Upvotes: 1

Related Questions