✅ Como fazer um Spinner ou ícone de carregamento com JQuery

Índice

Código HTML
Código JQuery

Neste tutorial, o criação de um Spinner, o ícone de carregamento típico que podemos ver na web, por exemplo, ao trabalhar em uma solicitação ao banco de dados.

É importante usar esses métodos para que o usuário possa perceber que nossa página está funcionando e não pense que ela não funciona, feedback para o usuário é vital. Vamos ver um exemplo em que usaremos JQuery para fazer uma solicitação à API de livros do google para obter o JavaScript.

Código HTML

O código do nosso HTML não terá nenhuma complicação, você pode ver abaixo.

 Carregando livros JS de pesquisa

Podemos ver no cabeçalho que eu importo o script chamado script.jsVeremos mais tarde o que faz. Também importamos o JQuery e a fonte que será usada para colocar o Spinner, esta não é uma imagem, é um ícone que ficará bem em todos os tipos de telas, você pode ver o que tem e instalá-lo a partir da página oficial de fontes incríveis . Em seguida, colocamos a codificação dos caracteres em utf-8 através de meta charset.

Na parte do corpo, foi criado um botão que se encarregará de iniciar a solicitação à API e um div onde inseriremos os dados que nos interessam a partir da resposta recebida. Ambos têm um id para poder usá-los de nosso script.

Código JQuery

O código não é complicado se você está acostumado com solicitações AJAX com JQuery.

 $ (document) .ready (function () {$ ("# button"). click (function () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Usado apenas para ver o spinner por mais tempo no exemplo $ ('# data' ). html ("") para (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var author = book.authors if (author == undefined) author = "?" $ ('# data'). append ("
"+ (i + 1) +") "+ book.title +"
- Autor / es: "+ autor +"")}});})}) função sleep (milissegundos) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> milissegundos) quebrar;}}

O código pode ser visto envolto por $ (document) .ready, isso é necessário para que o script carregue quando nosso documento HTML estiver pronto e os IDs forem "conhecidos". Por dentro podemos ver que ouvimos um evento de clique de botão, como dito antes, será o único a lançar a petição.

Uma vez evento de clique é disparado A primeira coisa que se faz é inserir o Spinner (como dito anteriormente não é uma imagem, se fosse um gif.webp aqui colocaríamos a tag img), e a seguir proceder para realizar o Pedido AJAX, é um pedido OBTER, então especificamos a URL onde isso será feito.

Nós vemos o .feito, esta parte será executada quando a resposta da API terminar. Dentro do .feito temos uma chamada para a função dorme (Isso foi criado para que o código "espere" mais 2 segundos após receber uma resposta, para que você possa apreciar bem o Spinner, isso não deve ficar claro). O código importante é aquele que esvazia o html que contém os dados de id (remove o Spinner) e o preenche em um loop com os dados que recebe da API, (os dados são passados como parâmetro no done, é a resposta), para tratar A resposta deve conhecer os dados que retorna, neste caso é mostrado o título dos livros e seu (s) autor (es).

ObservaçãoNós também poderíamos colocar .falhar, o que eu faria é executar o código que ele contém em caso de erro, mas essa parte é evitada, pois para este exemplo não é necessário. Se você quiser saber mais sobre as solicitações AJAX em JQuery, visite a página a seguir ou o tutorial a seguir.

A função dorme Não faz parte, nem é interessante para carregar o ícone, mas nos ajuda a ver bem o Spinner foi adicionado, a única coisa que ele faz é obter o tempo inicial e fazer um loop infinito até os milissegundos que são inseridos como uma passagem de parâmetro, o loop é interrompido e a função termina.

Vamos ver como o código funciona, quando abrimos a página vemos um botão simples:

Ao clicar nele, o Spinner ou ícone de carregamento aparecerá, o que levará pelo menos 2 segundos em ação (você terá que adicionar o tempo que a solicitação leva):