Como criar: ícone animado
- Página anterior Linha de divisão de texto
- Próxima página Cronômetro de contagem regressiva
Aprenda a usar ícones para criar efeitos de animação.
Carga de bateria
Primeiro passo - Adicionar HTML:
<div id="charging" class="fa"></div>
Segundo passo - Incluir a biblioteca de ícones do Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Em nosso Tutorial de Font Awesome Para obter mais informações sobre o Font Awesome.
Terceiro passo - Adicionar 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>
Explicação do exemplo:
A impressão que esta exemplo deixa é de que a bateria está sendo carregada, mas na verdade ele exibe cinco ícones diferentes.
Uma função chamada chargebattery() A função é responsável por substituir e exibir todos os ícones.
Esta função exibe primeiro um ícone de bateria vazia:
Após um segundo, o ícone é substituído por um novo ícone:
Cada segundo, um novo ícone substitui o ícone atual até que a "bateria esteja completamente carregada":
Este processo se repete a cada 5 segundos, dando a impressão de que a bateria está sendo carregada.
Mais ícones de animação
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
- Página anterior Linha de divisão de texto
- Próxima página Cronômetro de contagem regressiva
