Aprenda a usar animações de carregamento com JavaScript e implemente esse importante recurso visual em suas páginas e aplicativos.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vou te mostrar como usar as animações de carregamento com JavaScript!
Sabe aquelas animações de loading (carregamento) que aparecem em uma página ou aplicativo? Hoje, vou te mostrar como implementar esse importante recurso visual utilizando o JavaScript.
Essas animações servem para sinalizar ao usuário que as informações estão sendo carregadas e que eles podem aguardar um pouco para visualizá-las.
As animações de carregamento ajudam a identificar que temos algo sendo carregado e que não está simplesmente travado.
Então, faça o download do material disponível e vem comigo aprender a criar e utilizar as animações de carregamento com JavaScript.
Para visualizarmos o funcionamento das animações de carregamento com JavaScript, iremos utilizar o nosso projeto com a tabela de classificação dos pilotos da Fórmula 1 de 2023, o qual viemos trabalhando nas últimas aulas.
Caso você não tenha acompanhado essas aulas, pode voltar para conferir como construímos esse projeto do zero, ou fazer o download do material disponível nesta aula.
Dentro desse projeto, temos nosso código front-end que faz uma requisição para o nosso back-end e obtém as informações dos pilotos através de uma API utilizando a biblioteca Axios.
async function popularTabelaComDadosLista(idCorpoTabela) {
try{
const corpoTabela = document.getElementById(idCorpoTabela);
const listaDeDadosPilotos = (
await axios.get('http://localhost:3000/api/v1/drivers')
).data;
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
const novaLinhaTabela = `<tr class='${
numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
}'>
<td class="text-center py-4">${numeroElemento + 1}</td>
<td class="text-center py-4">${dadosPiloto.name}</td>
<td class="text-center py-4">${dadosPiloto.team}</td>
<td class="text-center py-4">${dadosPiloto.points}</td>
</tr>`;
corpoTabela.innerHTML += novaLinhaTabela;
});
} catch(erro){
console.log(erro);
} finally {
console.log('Função acabou de ser executada');
}
}
popularTabelaComDadosLista('corpo-tabela');Além do nosso arquivo JavaScript, também temos o HTML da página e o CSS.
A animação de carregamento que iremos utilizar é da biblioteca JS Loading Overlay, disponível no NPM. Caso queira, existem alternativas e outras opções dentro do NPM que você pode buscar para experimentar.
Dentro do NPM, temos um resumo da documentação dessa biblioteca, assim como as formas de integrá-la ao seu projeto. O método que iremos utilizar será o CDN (Content Delivery Network).
Isso envolve copiar a tag <script> disponível na página da biblioteca e colá-la dentro da tag <head> no arquivo HTML (index.html) do nosso projeto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./style.css" />
<title>f1-2023-standings</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-loading-overlay.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script defer src="./script.js" type="module"></script>
</head>Com isso feito, temos acesso a essa funcionalidade dentro do projeto.
Para utilizar as funcionalidades dessa biblioteca dentro do nosso projeto, é bastante simples. Basta criarmos a nossa animação de carregamento, JsLoadingOverlay, e utilizar o método show. Isso irá exibir a animação de carregamento.
Depois, para esconder essa animação, basta utilizarmos o método hide.
Dentro do nosso código JavaScript, vamos adicionar nossa animação de carregamento no início da função popularTabelaComDadosLista. Isso fará com que, enquanto a página carrega as informações, a animação seja exibida.
Ao final, vamos esconder nossa animação dentro do bloco finally. Esse é o local ideal para inserir o fechamento da nossa animação, pois as ações contidas dentro desse bloco são executadas independentemente do sucesso ou falha do código.
Ou seja, independente se a página carregar adequadamente, ou apresentar algum erro, a animação será enecerrada.
async function popularTabelaComDadosLista(idCorpoTabela) {
try {
JsLoadingOverlay.show();
const corpoTabela = document.getElementById(idCorpoTabela);
const listaDeDadosPilotos = (
await axios.get('http://localhost:3000/api/v1/drivers')
).data;
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
const novaLinhaTabela = `<tr class='${
numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
}'>
<td class="text-center py-4">${numeroElemento + 1}</td>
<td class="text-center py-4">${dadosPiloto.name}</td>
<td class="text-center py-4">${dadosPiloto.team}</td>
<td class="text-center py-4">${dadosPiloto.points}</td>
</tr>`;
corpoTabela.innerHTML += novaLinhaTabela;
});
} catch (erro) {
console.log(erro);
} finally {
JsLoadingOverlay.hide();
console.log('Função acabou de ser executada!');
}
}
popularTabelaComDadosLista('corpo-tabela');Executando nossa página agora, teremos a animação sendo carregada no início da função enquanto a página estiver sendo montada, e em seguida ela será encerrada no bloco finally, independentemente das informações serem ou não carregadas.
Agora, vamos executar o nosso back-end para que, quando executarmos a página do nosso projeto, as informações sejam carregadas adequadamente.
Para executar o back-end, basta acessarmos a pasta correspondente pelo terminal do computador e executar o comando npm run dev.
Feito isso, podemos atualizar a nossa página com a tabela da Fórmula 1 e teremos as informações sendo carregadas.
Como o processo de carregamento das informações é muito rápido, nem chegamos a ver a animação sendo executada nesse caso.
Para visualizarmos melhor a animação acontecendo, vou criar um atraso artificial na execução do código com a função setTimeout.
Essa função nos permite executar um código de forma assíncrona após um intervalo de tempo específico.
Dessa forma, podemos utilizar a função setTimeout para simular um tempo de espera antes de encerrar a animação, permitindo controlarmos sua duração e proporcionando uma transição suave para o usuário.
Como argumentos para essa função, precisaremos passar a função que desejamos executar e o tempo, em milissegundos, que ela deverá aguardar para ser executada.
No nosso caso, vamos definir uma função anônima (usando uma arrow function) que irá chamar o método hide() do nosso objeto JsLoadingOverlay, e determinar um tempo de 1000 milissegundos de espera.
Essa função será aplicada dentro do nosso bloco finally.
async function popularTabelaComDadosLista(idCorpoTabela) {
try {
JsLoadingOverlay.show();
const corpoTabela = document.getElementById(idCorpoTabela);
const listaDeDadosPilotos = (
await axios.get('http://localhost:3000/api/v1/drivers')
).data;
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
const novaLinhaTabela = `<tr class='${
numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
}'>
<td class="text-center py-4">${numeroElemento + 1}</td>
<td class="text-center py-4">${dadosPiloto.name}</td>
<td class="text-center py-4">${dadosPiloto.team}</td>
<td class="text-center py-4">${dadosPiloto.points}</td>
</tr>`;
corpoTabela.innerHTML += novaLinhaTabela;
});
} catch (erro) {
console.log(erro);
} finally {
setTimeout(() => JsLoadingOverlay.hide(), 1000);
console.log('Função acabou de ser executada!');
}
}
popularTabelaComDadosLista('corpo-tabela');Dessa forma, será possível vermos a animação iniciando e finalizando normalmente.
Na aula de hoje, eu te mostrei como utilizar animações de carregamento com JavaScript, utilizando a biblioteca Js Loading Overlay.
A utilização de animações durante processos de carregamento em páginas é um importante recurso visual que serve como indicativo para comunicar ao usuário que a página está ativa e em processo.
Essa técnica ajuda a evitar que os usuários percebam travamentos ou lentidões na aplicação, proporcionando uma melhor experiência e comunicação entre o aplicativo/página e o usuário.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador