Cómo - Animar iconos
Aprende a usar íconos para crear un efecto animado.
Bateria cargando
Paso 1) Agregar HTML:
Ejemplo
<div id="charging" class="fa"></div>
Paso 2) Incluya la biblioteca de iconos Font Awesome:
Ejemplo
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Lea más sobre Font Awesome en nuestro Tutorial de Font Awesome .
Paso 3) Agrega un JavaScript:
Ejemplo
<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>
Ejemplo explicado
El ejemplo da la impresión de que se está cargando una batería, pero en su lugar se muestran cinco iconos diferentes.
Una función llamada chargebattery()
hace todo el reemplazo y visualización de iconos.
La función comienza mostrando un icono de batería vacía:
Después de un segundo, el ícono es reemplazado por un nuevo ícono:
El ícono es reemplazado por un nuevo ícono cada segundo, hasta que "la batería esté completamente cargada":
Este proceso se repite cada 5 segundos, dando la impresión de que la batería se está cargando.
Más iconos animados
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo