JavaScript CSS Barre de progression pour un test VoIP

Question

J'ai essentiellement deux divs, l'un étant absolument placé au-dessus de l'autre. J'ai également une variable provenant d'une application qui représente le pourcentage d'achèvement d'un test VoIP. Maintenant, je dois faire en sorte que la barre de progression appelle la variable de pourcentage en utilisant JavaScript.

On m'a dit que je devais mettre à jour la barre de progression de manière asynchrone, mais je ne sais pas comment faire. Je sais qu'il existe de nombreuses façons de le faire. J'apprends encore le JavaScript et j'ai besoin d'un exemple pour travailler. J'ai essayé un certain nombre de solutions qui devraient fonctionner, mais ce que je publie ici n'est que la tentative la plus récente.

Je me réfère à ceci Exemple/tutoriel sur YouTube mais il est évident que je n'utilise pas setInterval() parce que je veux que la largeur soit basée sur la variable. J'ai fait exécuter le test sur le clic d'un bouton et j'ai pensé qu'il n'était pas nécessaire de l'inclure.

//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 1

Les variables css doivent toujours avoir un double tiret au début de leur nom.
Personnellement, je trouve l'exemple tordu sur youtube,
pour le même résultat, je vois des choses comme ça :

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>

Laissez-moi prendre votre cerveau et essayer de démêler tout ça.

no problemo amigo ;)

1. Le double tiret est logique mais je pensais que JavaScript n'aimait pas les tirets ou certains autres symboles.

c'est juste dans la doc, et pour javascript ce n'est pas un symbole ou autre mais juste une chaîne de caractères

Utilisation des propriétés personnalisées CSS (variables) \==doc== ou pour \==JS part==

2. donc #ressBar::before est pour la largeur qui est modifiée et #ressBar::after est pour le texte "Loading..." ?

le texte "Chargement ..." se trouve dans la section ::after ,
alors que la barre de progression est dans le ::before de sorte qu'il apparaisse en dessous.

Mettre le texte et la barre de progression ensemble est une mauvaise idée :
si la progression est nulle, le texte ne peut pas être affiché dans un espace nul.

3. Y a-t-il une raison pour laquelle le calcul de la "largeur" se fait à gauche et à droite ?

dans mon code, la barre bleue est width: 100% de son parent.
Il se "déplace" simplement plus ou moins vers la droite en fonction de la valeur de progression demandée.

la partie excédentaire est à la left en valeur négative de son élément parent ( #ressBar { qui a comme règle css : overflow: hidden;
deux avantages :
1- vous faites juste la taille que vous voulez sur le parent sans autre changement css
2- la barre bleue n'a aucun problème de css avec la border-radius: 1em; lorsque sa taille est inférieure à 1em

4. Je ne comprends pas comment la partie JavaScript fonctionne. Je comprends pRessBar mais je ne comprends pas votre commentaire faisant référence à 0 <= val <= 0 OU la syntaxe de setProperty ``'${val}%' ``.

0 <= val <= 0 est une erreur et devrait être 0 <= val <= 100 c'est-à-dire que l'argument val doit être compris entre 0 et 100

${val}% c'est une utilisation normale des arguments en Les littéraux des modèles si val==45 c'est fait 45% (% est juste un caractère comme un autre)