Carregando… Animação em Vanilla JavaScript

Introdução

Ao desenvolver sites e aplicativos da Web, incluir uma animação de carregamento pode melhorar significativamente a experiência do usuário ao comunicar o que está acontecendo. Isso envolve os usuários e mantém a atenção deles durante o carregamento do conteúdo, e ajuda os usuários a entender o que está acontecendo, em vez de deixá-los na dúvida.

Neste guia, veremos como usar o Vanilla JavaScript para criar uma animação de carregamento. Trabalharemos tanto com animação Gifs e carregadores criados por CSS e veja como usá-los em dois cenários: carregar conteúdo na inicialização do aplicativo/site ou solicitar conteúdo de uma API externa.

Como criar um carregador

Existem várias maneiras pelas quais as pessoas podem querer exibir seu carregador. Para os propósitos deste guia, construiremos um carregador que cobrirá a tela inteira e desaparecerá quando a página terminar de carregar. Primeiro de tudo, precisamos criar uma página HTML de espaço reservado:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Por uma questão de simplicidade, temos apenas dois <div> blocos – um para o carregador e outro para o conteúdo do site.

Como dito anteriormente, o ícone de carregamento pode ser um GIF, um ícone animado criado com CSS ou qualquer outra coisa. O importante a lembrar é que a mesma abordagem se aplica a qualquer tipo de ícone de carregamento que usamos.

Criar carregador usando um GIF

A GIF é um ícone animado que é reproduzido indefinidamente. Uma vez nós criamos nosso GIF, vamos estilizar o loader-container div que irá abrigá-lo. Existem várias maneiras de estilizá-lo! Você pode ser muito criativo aqui. Vamos simplesmente adicionar uma camada com fundo preto no topo da nossa página ao lado do ícone, para “bloquear” o conteúdo de carregamento:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Quando carregarmos nossa página da web agora, veremos um fundo preto com um GIF carregando no meio da tela, semelhante a isto:

Neste ponto, estamos prontos para implementar o carregamento usando JavaScript. Mas vamos ver também como podemos usar uma animação criada por CSS em vez de uma GIF, que não requer um arquivo adicional para importar.

Criar carregador usando CSS

Vamos criar exatamente o mesmo ícone com CSS. Lembre-se, criamos uma div extra (spinner) dentro de loader-container div e é isso que usaremos para representar o ícone:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

O código acima nos ajudará a criar um ícone do carregador CSS do qual agora podemos usar o div do contêiner do carregador para centralizar e adicionar o fundo preto como fizemos anteriormente:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Agora que vimos os dois tipos de carregadores animados disponíveis, vamos usar JavaScript para controlar quando essa animação de carregamento aparece e desaparece.

Como implementar uma animação de carregamento com JavaScript

JavaScript nos permite manipular nossa estrutura HTML e remover ou ocultar o loader-container que é exibido atualmente em frente de o conteúdo do site. Existem duas abordagens principais para conseguir isso – apenas ocultando o loader-container, ou removê-lo completamente.

Seja qual for a abordagem escolhida, o primeiro passo é usar o querySelector() or getElementById() para recuperar o loader-container para que possamos manipulá-lo:

const loaderContainer = document.querySelector('.loader-container');

Em segundo lugar, usaremos o eventListener para ouvir um load evento, para que ele chame a função de retorno de chamada quando o load evento ocorre:

window.addEventListener('load', () => { // ...
});

Escondendo o Elemento Carregando…

A abordagem mais comum é esconder o loader-container de display: none para que desapareça quando o conteúdo estiver totalmente carregado.

HTML DOM nos permite alterar o estilo de nossos elementos HTML de JavaScript, e o código abaixo indica que estamos configurando o container do carregador display propriedade para none para que não apareça uma vez que o load é bem sucedido:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Alternativamente, você pode criar uma classe separada que contém display: none propriedade:

.loader-container-hidden { display: none;
}

E, em seguida, usar classList.add() para adicionar a classe ao loader-container elemento:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Removendo o Elemento Carregando…

Até agora, vimos um método importante que nos permite ocultar nossos loader-container, o que implica que o elemento ainda está presente, mas oculto. Outra opção é remover o elemento completamente:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

Neste ponto, quando carregamos nossa página, a animação de carregamento será exibida até que o conteúdo da página seja totalmente carregado.

Implementando a animação de carregamento ao solicitar conteúdo externo de uma API

Buscar conteúdo de uma API externa é outra situação que pode precisar da inclusão de um carregador. Esse tipo de conteúdo pode levar algum tempo para buscar e exibir, portanto, é melhor incluir um carregador.

No nosso caso, vamos tentar obter uma cotação de um API de cotações usando a API Fetch integrada. Observe que o HTML que criamos no início deste artigo tem um “Gerar cotação” botão. Tudo o que temos a fazer é usar o document.querxySelector() método para obter o elemento e criar uma função de retorno de chamada para lidar com um click evento que é acionado quando o usuário clica no botão:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Isso nos ajudará a obter cotações aleatórias em nosso aplicativo, mas gostaríamos de ter um carregando animação para que o usuário saiba que estamos esperando conteúdo. Para fazer isso, vamos criar dois métodos, um para exibir o loader-container e o outro para escondê-lo:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

Neste ponto, podemos finalmente incorporar a animação de carregamento na função de retorno de chamada. Quando a busca começar, a função de retorno de chamada exibirá a animação de carregamento e a ocultará assim que os dados forem recebidos:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Conclusão

Neste artigo, aprendemos como usar o JavaScript vanilla para criar uma animação de carregamento e exibi-la adequadamente. Consideramos várias abordagens para fazer isso e analisamos alguns casos de uso diferentes para a animação de carregamento. Optamos por usar o círculo giratório como carregador, mas você pode alterá-lo da maneira que desejar - sinta-se à vontade para criar o seu próprio GIF ou carregador animado CSS.

• Coinsmart. A melhor troca de Bitcoin e criptografia da Europa.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. ACESSO LIVRE.
• CryptoHawk. Radar Altcoin. Teste grátis.
• Fonte: https://stackabuse.com/loading-animation-in-vanilla-javascript/