0

Busco de mil maneras para darles animaciones a mis progress bar y no lo logro, desconozo muchisimo el tema de los componentes.

Aqui les dejo mis progress bar, si alguien me echa una mano!

<div class="w-full">

         <div class="shadow w-full bg-blue-lighter">
             <div class="bg-blue text-xs leading-none py-1 text-center text-white" style="width: 45%"></div>
         </div>

          <div class="shadow w-full bg-teal-lighter mt-2">
            <div class="bg-teal text-xs leading-none py-1 text-center text-white" style="width: 55%"></div>
          </div>

          <div class="shadow w-full bg-orange-lighter mt-2">
            <div class="bg-orange text-xs leading-none py-1 text-center text-white" style="width: 65%"></div>
          </div>

          <div class="shadow w-full bg-red-lighter mt-2">
            <div class="bg-red text-xs leading-none py-1 text-center text-white" style="width: 75%"></div>
          </div>

    </div>
0

1 respuesta 1

0

function move() {
  var elem = document.getElementById("myBar"); 
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}
<button class="w3-button w3-green w3-left" onclick="move()">Run</button>

<div id="myProgress">
  <div id="myBar"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.