Tengo una barra de progreso y quiero que esté llena al 2000 % de ancho
me gusta
let progress = 0 if(progress === 0) { $(".progressbar").css('width' , 0+"%") } else if(progress === 250) { $(".progressbar").css('width' , 250+"%") }Pero cuando el progreso es del 250%, muestra que la barra de progreso está llena, pero no quiero eso.
¿O debería hacerlo como cuando progress === 250 , la barra de progreso estará al 10%, por ejemplo?
Si hay otra manera de hacer esto, por favor ayuda
Esto es más matemáticas que codificación. Si 2000 es su 100%, suponiendo que el resto de su rango sea lineal, debe dividir progress por 20 y establecerlo como su porcentaje de ancho.
Aquí hay un ejemplo de trabajo:
progressInput.addEventListener('input', (e) => { let progress = e.target.value; val.textContent = progress; bar.style.width = `${progress/20}%` }) #container { width: 150px; height: 30px; outline:auto; } #bar { background-color:green; height: 100%; width: 0%; } <input id="progressInput" type="range" max="2000" value="0"><span id="val">0</span> <div id="container"> <div id="bar"></div> </div>Debe usar un porcentaje de 0% a 100% . No vayas más allá de eso. Puede mapear de 2000 a 100. Si quiere que sea 200% => 10%, simplemente hágalo...
let progress = 0 if(progress == 0) { $(".progressbar").css('width' , "0%") } else if(progress == 200) { $(".progressbar").css('width' , "10%") }Espero que esto solucione tu problema :)