Como - Animar ícones
Aprenda a usar ícones para criar um efeito animado.
Carregamento da bateria
Etapa 1) Adicionar HTML:
Exemplo
<div id="charging" class="fa"></div>
Etapa 2) Inclua a Biblioteca de ícones do Font Awesome:
Exemplo
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Leia mais sobre Font Awesome em nosso Tutorial Font Awesome .
Etapa 3) Adicione um JavaScript:
Exemplo
<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>
Exemplo explicado
O exemplo dá a impressão de uma bateria sendo carregada, mas são cinco ícones diferentes sendo exibidos.
Uma função chamada chargebattery()
faz toda a substituição e exibição de ícones.
A função começa exibindo um ícone de bateria vazia:
Após um segundo, o ícone é substituído por um novo ícone:
O ícone é substituído por um novo ícone a cada segundo, até que "a bateria esteja totalmente carregada":
Este processo é repetido a cada 5 segundos, fazendo parecer que a bateria está carregando.
Mais ícones animados
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo