Skip to main content

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>

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="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>

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>
título editado
Enlace

Como darle animaciones a estos progress bar con scripsscripts en vue con tailwind css?

Revertido a la revisión 1 - Aprobación de edición anulada por el propietario de la publicación o un moderador
Origen Enlace

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>

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>

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="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>
Loading
Origen Enlace
Loading