HTML Qual a logica para usar um spinner?

thefill · 14 de maio de 2021

Estou tendo dificuldades para entender como usar um spinner, tipo eu sei que ele serve para mostrar ao usuário que alguma coisa esta carregando, por exemplo, se eu estou puxando dados de alguma API e quero dizer que algo esta carregando eu uso um spinner para mostrar ao usuário enquanto os dados que eu requisitei estão vindo, eu entendi que é uma coisa mais relacionada a aparência, mas eu gostaria de usar, só não estou entendendo como fazer essa transição do spinner para os dados no HTML.

Se eu não me engano tem algo haver com o DOM do HTML, não é isso?

Esse seria um exemplo básico de como usar o spinner que eu encontrei no W3School:

<!DOCTYPE html>
<html>
<head>
  <title>Spinner Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="spinner-border"></div>
</div>

</body>
</html>

Alguém poderia me ajudar a entender como isso funciona?

DiF · 15 de maio de 2021

@thefill Basicamente é um loader.

Serve só para indicar que algo ainda está em carregamento.

Você precisa usar o ajax(requisição assíncrona) para mostrar ele enquanto o dado é carregado, e esconder ele quando de fato for carregdo.

thefill · 15 de maio de 2021

Olá Sr.@DiF, muito obrigado por me responder.

11 horas atrás, DiF disse:

Basicamente é um loader.

Serve só para indicar que algo ainda está em carregamento.

Exatamente!

Essa parte eu entendi.

14 horas atrás, thefill disse:

eu sei que ele serve para mostrar ao usuário que alguma coisa esta carregando, por exemplo, se eu estou puxando dados de alguma API e quero dizer que algo esta carregando eu uso um spinner para mostrar ao usuário enquanto os dados que eu requisitei estão vindo, eu entendi que é uma coisa mais relacionada a aparência

11 horas atrás, DiF disse:

Você precisa usar o ajax(requisição assíncrona) para mostrar ele enquanto o dado é carregado, e esconder ele quando de fato for carregdo.

Agora essa parte ai do ajax é que eu não sabia, teria como você me dizer como se faz?

Pode ser com um exemplo simples mesmo só para eu ter uma ideia de como é.

Ou se não quiser dar um exemplo, poderia pelo menos dizer o assunto que eu pesquiso por aqui.

11 horas atrás, DiF disse:

e esconder ele quando de fato for carregdo.

Outra parte que eu estou confuso é relacionado a essa parte de troca do que aparece para o usuário, do spinner para os dados recebidos.

Bem, de qualquer forma, mais uma vez, muito obrigado por me responder, vou continuar pesquisando aqui mas agora mais direcionado ao ajax.

DiF · 15 de maio de 2021

@thefill

O ajax é uma técnica usada em javascript, que permite fazer requisições ao servidor de modo assíncrono.

Tem dois meios de fazer eles. Com javascript puro e com jQuery.

Eu recomendo usar o ajax com jQuery que é mais fácil e existe uma função especifica para isso.

Por exemplo $.ajax() dentro dessa função ele vai receber diversos parâmetros de requisição como url, data(os dados requeridos), dentre eles, você pode adicionar outras duas funções que são:

beforeSend: function() { 
  $('.ajax-loading').addClass('active'); 
},

e

.complete(function() { 
  $('.ajax-loading').removeClass('active'); 
});

Sendo que esse último fica fora da primeira função $.ajax().. algo como:

$.ajax({
  url: 'arquivoemphp.php',
  data: {variaveis que serão passadas},
  dataType: 'HTML',
  method: 'POST',
  beforeSend: function() { 
  $('.ajax-loading').addClass('active'); 
}

}).complete(function() {
    $('.ajax-loading').removeClass('active');
}).done(function(e){
    aqui você vai adicionar os dados que serão mostrados em tela
});

Basicamente o beforeSend, fica mostrando o loading, enquanto carrega, assim que termina com o complete, ele remove o loading e mostra os dados na tela com o .done()

https://api.jquery.com/jquery.ajax/