Como criar um loading spinner enquanto uma requisição assíncrona é processada?
Ao trabalhar com requisições assíncronas em JavaScript, como chamadas a APIs, é fundamental melhorar a experiência do usuário, informando-o de que a operação está em andamento. Uma maneira simples e eficaz de fazer isso é usando um loading spinner, que é um ícone de carregamento exibido enquanto o processo assíncrono está sendo concluído.
Esse tipo de recurso visual é uma das melhores práticas para páginas que realizam operações demoradas, como o envio de dados a um servidor ou a recuperação de informações de uma API.
Como criar um loading spinner?
Para criar um loading spinner simples, você pode usar apenas HTML, CSS e JavaScript. O spinner será exibido enquanto a requisição assíncrona está sendo processada e será ocultado quando a requisição for concluída.
Aqui está um exemplo básico de como criar um loading spinner com CSS e exibi-lo enquanto uma requisição assíncrona é processada:
HTML + CSS
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de Loading Spinner</title>
<style>
/* Estilo do spinner */
.spinner {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- Spinner -->
<div id="spinner" class="spinner"></div>
<button onclick="fazerRequisicao()">Fazer requisição</button>
<script src="script.js"></script>
</body>
</html>O que o código está fazendo: Este código HTML cria um spinner simples usando CSS. O spinner é inicialmente ocultado com display: none; e será exibido quando a requisição assíncrona for iniciada.
JavaScript
Agora, vamos adicionar a funcionalidade de exibir o spinner durante a execução de uma requisição assíncrona:
function fazerRequisicao() {
// Mostrar o spinner
document.getElementById('spinner').style.display = 'block';
// Simular uma requisição assíncrona (exemplo com setTimeout)
setTimeout(() => {
// Ocultar o spinner após a requisição ser concluída
document.getElementById('spinner').style.display = 'none';
alert('Requisição concluída!');
}, 3000); // Simulando 3 segundos de delay
}O que o código está fazendo: Quando o usuário clica no botão "Fazer requisição", a função fazerRequisicao() é chamada. A primeira ação da função é mostrar o spinner, alterando o display do elemento spinner para block. Em seguida, simulamos uma requisição assíncrona com setTimeout, que aguarda 3 segundos (simulando o tempo de uma requisição). Após esse tempo, o spinner é ocultado novamente e um alerta é exibido, indicando que a requisição foi concluída.
Usando um spinner com fetch para requisição real
Em vez de usar o setTimeout para simular uma requisição, você pode usar o fetch para fazer uma requisição HTTP real. O funcionamento seria o mesmo, mas o tempo de resposta dependeria do servidor e da rede.
Exemplo de como usar fetch com spinner:
function fazerRequisicao() {
// Mostrar o spinner
document.getElementById('spinner').style.display = 'block';
// Fazer uma requisição real usando fetch
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
// Ocultar o spinner após a requisição ser concluída
document.getElementById('spinner').style.display = 'none';
console.log(data); // Exibe os dados da requisição no console
})
.catch(error => {
document.getElementById('spinner').style.display = 'none';
console.error('Erro na requisição:', error);
});
}O que o código está fazendo: Agora, estamos fazendo uma requisição real usando o fetch para obter posts de um endpoint de exemplo (jsonplaceholder). Enquanto a requisição está sendo feita, o spinner é exibido, e após a conclusão da requisição (com sucesso ou erro), o spinner é ocultado.
Considerações finais
Usar um spinner de carregamento é uma técnica simples e eficaz para melhorar a experiência do usuário enquanto espera que uma requisição assíncrona seja concluída. Ao usar a abordagem descrita aqui, você pode facilmente controlar a visibilidade do spinner com base no estado da sua requisição assíncrona.
Não se esqueça de utilizar o CSS para personalizar o spinner e garantir que ele seja visível e intuitivo para os usuários.
Melhore a experiência do usuário com spinners enquanto espera por requisições assíncronas
Um loading spinner é uma maneira eficaz de indicar ao usuário que a página está carregando ou que uma operação está em andamento. Essa técnica ajuda a melhorar a experiência do usuário, evitando que ele fique confuso ou sem saber o que está acontecendo enquanto espera por uma resposta da aplicação.
Algumas aplicações:
- Exibir spinners enquanto aguarda o carregamento de dados de uma API ou servidor.
- Usar spinners em sites e aplicativos para melhorar a percepção de desempenho durante requisições demoradas.
- Implementar uma interface interativa e informativa que comunica ao usuário que o sistema está processando suas ações.
Dicas para quem está começando
- Comece com spinners simples em CSS, e depois explore bibliotecas de animação para criar spinners mais sofisticados.
- Não se esqueça de ocultar o spinner assim que a requisição for concluída para evitar confundir o usuário.
- Certifique-se de que o spinner tenha uma boa visibilidade, sem bloquear outras interações da página.
- Experimente usar o
fetchem vez desetTimeoutpara requisições reais em suas páginas web.
Contribuições de Andressa Maria
