JavaScript CSS Progress bar for a VoIP test Code Answer

I basically have two divs, one being absolutely placed over the other. I also have a variable from an application that represents the percent of a VoIP test completeness. Now I need to have the progress bar call the percent variable using JavaScript.

I have been told I need an asynchronously update the progress bar but im unsure how to do that. im aware there are many ways to do this. I am still learning JavaScript and need an example to work with. I have tried a number of what I would assume would work but what I post here is just the most recent attempt.

I am referencing this YouTube example/tutorial, but obviously I am not using setInterval() because I want the width based on the variable. I have the test run on a button’s click and felt that it was unnecessary to include.

//Variable for the test's percent. it provides just a number in increments of 5

<param name="js-prog" value="progress($PROGRESS$)">

 function progress(pRess) {
      const pRessBar = document.getElementsByClassName('ressBar');
      const computedStyle = getComputedStyle(pRessBar);
      const styleWidth = parseFloat(computedStyle.getPropertyValue('pwidth')) || 0
      pRessBar.style.setproperty('pwidth', styleWidth + pRess)
}
.ressBar {
  position: relative;
  width: 500px;
  height: 3em;
  background-color: #111;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  color: white;
}
.ressBar::before {
  content: attr(data-label);
  display: flex;
  align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;
  width: calc(var(pwidth, 0) * 1%);
  min-width: .1rem;
  max-width: calc(100% - 1em);
  background-color: #069;
  border-radius: 15px;
  padding: 1em;
}
`<div class="ressBar" Id="ressBar" style="pwidth: .1" data-label="Loading..."></div>

Answer

css variables should always have double dash at beginning of their names.
Personally, I find the example twisted on youtube,
for the same result, I see things like that:

const pRessBar = document.getElementById('ressBar') 

function setRessBar_percent(val) { // 0 <= val <= 100
  pRessBar.style.setProperty('--pwidth', `${val}%`)
  pRessBar.dataset.label = (val<100)? 'Loading...' : 'Loading completed ;-)'
}

/* test part */
inSiz.oninput=_=>
  {
  inSiz.nextSibling.textContent = `${inSiz.value}%`
  setRessBar_percent(inSiz.value) 
  }
#ressBar {
  box-sizing: border-box;
  position: relative;
  width: 500px;
  --pwidth: 50%;
  height: 3em;
  background-color: #111;
  margin: 1em auto;
  border-radius: 1.5em;
  color: white;
  border: .5em solid #111; ; /* try red color */
  overflow: hidden;
}
#ressBar::before {
  position: absolute;
  top: 0;
  left: calc( -100% + var(--pwidth) );
  content: '';
  width: 100%;
  height: 100%;
  background-color: #069;
  border-radius: 1em;
}
#ressBar::after {
  content: attr(data-label);
  position: absolute;
  left: 1em;
  top: 0;
  height: 2em;
  line-height: 2em;
}

/* test part */

#inSiz {
margin : 1em;
width: 200px;
}
<div Id="ressBar" data-label="Loading..."></div>

<!-- test part -->
<hr>
<p>play with this range : <p>
<input id="inSiz" type="range" value="50" min="0" max="100" step="1"><span>50%</span> (supposed value for the progress bar)
<p> to test the appearance of the progress bar<p>

let me pick your brain and try to pick this apart.

no problemo amigo 😉

  1. double dash makes sense but I thought that JavaScript doesn’t like dashes or other certain symbols.

it’s just in the doc, and for javascript it’s not a symbol or anything but just a string

Using CSS custom properties (variables) ==doc== or for ==JS part==

  1. so #ressBar::before is for the width that is being changed and #ressBar::after is for the text “Loading…”?

the text “Loading …” is in the ::after,
while the progress bar is in the ::before, so that it appears below.

Putting the text and the progress bar together is a bad idea:
if the progress is zero then the text cannot be displayed in a null space

  1. is there a reason why the calculation for the “width” is under left vs right?

in my code the blue bar is width: 100% of it’s parent.
It just “moves” more or less to the right depending on the progress value requested.

the excess part is to the left in negative value of its parent element (#ressBar { which has as rule css: overflow: hidden;
two advantages:
1- you just make the size you want on the parent with no other css change
2- the blue bar has no css problems with the border-radius: 1em; when it size is less than 1em

  1. I don’t understand how the JavaScript portion is working. I understand pRessBar but I don’t understand your comment referencing 0 <= val <= 0 OR the syntax for setProperty “` ‘${val}%’ “

0 <= val <= 0 is a mistake and should be 0 <= val <= 100 that’s say val argument should be between 0 and 100

${val}% it’s a normal use of arguments in Template literals if val==45 it’s made 45% (% is just a character like another)

Related Posts

© No Copyrights, All Questions are retrived from public domain.
Tutorial Guruji