Question

0

520

Views

How to add a Vertical line at the end of a percentage bar HTML/Javascript

I am using the following HTML/Javascipt code to make the classic percentage bar.

function update() {
  var element = document.getElementById("myprogressBar");
  var width = 1;
  var identity = setInterval(scene, 10);

  function scene() {
    if (width >= 70) {
      clearInterval(identity);
    } else {
      width++;
      element.style.width = width + '%';
      element.innerHTML = width * 1 + '%';
    }
  }
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
}

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}

<!DOCTYPE html>
<html>

<body>

  <h3>Example of Progress Bar Using JavaScript</h3>

  <p>Download Status of a File:</p>

  <div id="Progress_Status">
    <div id="myprogressBar">1%</div>
  </div>

  <br>
  <button onclick="update()">Start Download</button>

</body>

</html>

What I would like to obtain and I am trying to achieve with .innerHTML is the following situation

The vertical line has to appear at the same level of the specified percentage.

about 4 years ago · Santiago Gelvez

2 answers

Answer question

0

You could just add an :after pseudo element and add the following styles to it. Keep in mind that the parent, in the case #myprogressBar should be relatively positioned.

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
  position: relative;
}

#myprogressBar:after {
  width: 5px;
  height: 80px;
  background: #333;
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 5px;
}

about 4 years ago · Santiago Gelvez Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-22T23:36:14.235Z

For the vertical bar I used an added div nested inside the #Progress_Status container. It's styled to be absolute positioned and to change its offset in % in sync with the progress bar width.

For it to work, its container was set to position:relative as the reference frame.

function update() {
  //fetches the vertical bar elements
  var vbar = document.querySelector("#Progress_Status .percverticalbar");
  var element = document.getElementById("myprogressBar");  
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 70) {
      clearInterval(identity);
    } else {
      width++;
      //updates the left offset of the vertical bar
      vbar.style.left = `${width}%`;
      element.style.width = width + '%';
      element.innerHTML = width * 1  + '%';
    }
  }
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
  position: relative;
}

.percverticalbar{
  position: absolute;
  height: 100px;
  width: 5px;
  background: gray;
  top: -25px;
  left: 0;
}

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
  
  margin: 50px 0;
}

<h3>Example of Progress Bar Using JavaScript</h3>

<p>Download Status of a File:</p>

<div id="Progress_Status">
  <div id="myprogressBar">1%</div>
  <div class="percverticalbar"></div>
</div>

<br>
<button onclick="update()">Start Download</button>

0

520

How to add a Vertical line at the end of a percentage bar HTML/Javascript

2 answers

0

0

Find remote jobs

Andres GPT