Cómo crear: íconos animados

Aprende a usar íconos para crear efectos de animación.

Carga de batería

Prueba personalmente

Primero - Añadir HTML:

<div id="charging" class="fa"></div>

Segundo - Incluir la biblioteca de iconos de Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

En nuestro Tutoriales de Font Awesome para obtener más información sobre Font Awesome.

Tercero - Añadir JavaScript:

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "";
  setTimeout(function () {
    a.innerHTML = "";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

Prueba personalmente

Explicación del ejemplo:

La impresión que da este ejemplo es que la batería se está cargando, pero en realidad muestra cinco íconos diferentes.

Una función llamada chargebattery() La función es responsable de reemplazar y mostrar todos los íconos.

Esta función muestra primero un ícono de batería vacía:

Después de un segundo, el ícono se reemplaza por un nuevo ícono:

Cada segundo se reemplaza el ícono actual con un nuevo ícono hasta que se muestre "batería completamente cargada":

Este proceso se repite cada 5 segundos, haciendo que parezca que la batería se está cargando.

Más iconos de animación

Ejemplo

Prueba personalmente

Ejemplo

Prueba personalmente

Ejemplo

Prueba personalmente

Ejemplo

Prueba personalmente

Ejemplo

Prueba personalmente

Ejemplo

Prueba personalmente