He estado tratando de agregar 1% al ancho del div usando JS. Quiero hacerlo para que el ancho de la barra aumente de manera suave (pensé en usar animaciones pero no funcionó porque necesito especificar condiciones).
window.onload = function(){ for (let i = 0; i < 5; i++) { const bar = document.querySelectorAll(".child-bar")[i]; for (let j = 0; j < 82; j++) { //alert("j" + j); console.log("bar width: "+ bar.style.width) bar.style.width += '1%'; } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="skill"> <label for="HTML">HTML</label> <div class="parent-bar"> <span class="child-bar"></span> <h4>82%</h4> </div> </div>¿Quizás este ejemplo te ayude?
window.onload = function() { document.querySelectorAll(".parent-bar").forEach((el) => { const barNode = el.querySelector(".child-bar"); const valueNode = el.querySelector("h4"); const max = 82; const duration = 100; let value = 0; const tick = () => { barNode.style.width = `${value}%`; valueNode.innerHTML = `${value}%`; if (value++ < max) setTimeout(tick, duration); } tick(); }) } .child-bar { display: block; background: black; height: 1rem; width: 0; transition: 0.1s 0s linear; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="skill"> <label for="HTML">HTML</label> <div class="parent-bar"> <span class="child-bar"></span> <h4></h4> </div> <div class="parent-bar"> <span class="child-bar"></span> <h4></h4> </div> <div class="parent-bar"> <span class="child-bar"></span> <h4></h4> </div> </div>Aquí hay una solución con código detallado y comentarios para mayor claridad, usando setInterval .
(Tenga en cuenta que los elementos span tienen display: inline de forma predeterminada, por lo que establecer su width no tiene ningún efecto).
// Sets options and calls main function const myOptions = { MAX_WIDTH_PERCENT: 82, FRAME_COUNT: 100, FRAME_DURATION: 20 }; animateBars(myOptions); // Defines main function function animateBars(options){ const // Destructures options object to make local variables { MAX_WIDTH_PERCENT, FRAME_COUNT, FRAME_DURATION } = options, // Defines function to increment width increment = (value) => value += MAX_WIDTH_PERCENT / FRAME_COUNT, // Defines function to update bar (after incrementing width) incrementAndupdateBar = (bar, oldWidth, timerId) => { newWidth = Math.min(increment(oldWidth), MAX_WIDTH_PERCENT); bar.style.width = newWidth + "%"; bar.nextElementSibling.textContent = Math.floor(newWidth) + "%"; // (For demo) // Stops repeating the setInterval's function if(newWidth == MAX_WIDTH_PERCENT){ clearInterval(timerId); } return newWidth; // Returns updated value }; // Loops through bars for(let bar of document.querySelectorAll(".child-bar")){ // Repeatedly updates current bar, keeping track of width as we go let width = 0, // Initializes width for the current bar timerId; // ID for use by setInterval & clearInterval timerId = setInterval( // (Returns an ID for later use) // Takes 2 args: a func and a duration (in ms) to delay inbetween function(){width = incrementAndupdateBar(bar, width, timerId);}, FRAME_DURATION ); } } .parent-bar{ width: 300px; border: 1px dotted grey; } /* spans ignore "width" by default; "inline-block" solves this */ .child-bar{ display: inline-block; height: 1em; background-color: lightgreen; } h4{ margin: 0; text-align: center; } <div class="parent-bar"> <span class="child-bar"></span> <h4></h4> </div>