Spinner Ao adicionar dados de API (JavaScript) – JavaScript, HTML

Eu tenho um documento HTML que está coletando dados de uma API. Como os dados se recuperam, há um tempo de carregamento, geralmente 1-3 segundos. Eu quero incorporar um spinner ou algum tipo, quer spin.js ou um gif, enquanto os dados são carregados, então o usuário sabe que os dados estão se recuperando. Como adiciono uma roda rotativa ao carregar os dados, para a função LoadData ()?

Aqui está o meu código:

<script type="text/javascript" src="http://api.eventful.com/js/api"></script><script type="text/javascript">//Function which loads data from API.function loaddata() {//get varsvar oArgs = {app_key: "(HIDDEN FOR SECURITY PURPOSES)",q: "music",where: "San Diego","date": "2013061000-2015062000",page_size: 5,sort_order: "popularity",};var content = "";//API CALLEVDB.API.call("/events/search", oArgs, function(oData) {console.log(oData)//Get the title for each itemfor (var i = 0;i < oData.events.event.length;i++) {content += oData.events.event.title + "<br><br>";}// Show Data on page$("#ListItems").html(content);});}</script><body><input type = "button" value="search" onclick="loaddata();"/><br><br>//Where Data is presented.<span id = "ListItems"></span></body></html>

Respostas

1 para a resposta № 1

A maneira típica de alcançar isso é mostrar o gráfico do gráfico quando os dados remotos for solicitado e ocultar o Spinner quando a solicitação estiver concluída. No seu caso, você poderia fazer algo como o seguinte:

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *