El a todos.
Necesito su experiencia para hacer que mi barra de progreso desaparezca para que la posición del contenido vuelva a la parte superior una vez que la línea alcance el 100% y también muestre el número de progreso.
¿podria alguien ayudarme? Gracias
aquí está mi css
#myProgress { margin-top:20%; width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 30px; background-color: #4CAF50; } #content{ display:none; }html
<div id="myProgress"> <h1>Searching for best online fare...</h1> <div id="myBar"></div> </div> <br> <button onclick="move()">Click Me</button> <div id="content"> test </div>js
function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); document.getElementById('content').style.display='block'; } else { width++; elem.style.width = width + '%'; } } }Gracias por adelantado
Dentro de su if(width >= 100) puede hacer elem.style.display = 'none'
Para el texto de progreso dentro de la barra de progreso, puede hacer elem.innerHTML = width + "%";
Manifestación
function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 100); function frame() { if (width >= 100) { clearInterval(id); elem.style.display = 'none' document.querySelector("#myProgress h1").style.display = 'none'; document.getElementById('content').style.display = 'block'; } else { width++; elem.innerHTML = width + "%"; elem.style.width = width + '%'; } } } #myProgress { margin-top: 20%; width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 30px; background-color: #4CAF50; } #content { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myProgress"> <h1>Searching for best online fare...</h1> <div id="myBar"></div> </div> <br> <button onclick="move()">Click Me</button> <div id="content"> test </div>prueba esto
function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); document.getElementById('content').style.display='block'; document.getElementById('myProgress').style.display='none' } else { width++; elem.style.width = width + '%'; } } } #myProgress { margin-top:20%; width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 30px; background-color: #4CAF50; } #content{ display:none; } <div id="myProgress"> <h1>Searching for best online fare...</h1> <div id="myBar"></div> </div> <br> <button onclick="move()">Click Me</button> <div id="content"> test </div>Cambia tu js a:
function move() { var elem = document.getElementById("myBar"); var id = setInterval(frame, 10); var width = 1; function frame() { console.log(width); if (width >= 100) { clearInterval(id); document.getElementById('content').style.display='block'; document.getElementById('myProgress').style.display='none'; } else { width++; elem.style.width = width + '%'; } } }