Alterando o cursor para espera em javascript / jquery

Como eu faria meu cursor mudar para este ícone de carregamento quando uma função fosse chamada e como eu mudaria de volta para um cursor normal em javascript / jquery

Em seu uso jQuery:

$("body").css("cursor", "progress");

e depois voltar ao normal novamente

$("body").css("cursor", "default");

Um colega sugeriu uma abordagem que considero preferível à solução escolhida aqui. Primeiro, em CSS, adicione esta regra:

body.waiting * {
    cursor: progress;
}

Em seguida, para ativar o cursor de progresso, diga:

$('body').addClass('waiting');

e para desligar o cursor de progresso, diga:

$('body').removeClass('waiting');

A vantagem dessa abordagem é que, quando você desativa o cursor de progresso, quaisquer outros cursores que possam ter sido definidos em seu CSS serão restaurados. Se a regra CSS não for poderosa o suficiente em precedência para anular outras regras CSS, você pode adicionar um id ao corpo e à regra, ou usar !important.

Por favor, não use jQuery para isso em 2018! Não há razão para incluir uma biblioteca externa inteira apenas para realizar esta ação que pode ser alcançada com uma linha:

Mude o cursor para girador: document.body.style.cursor = 'wait';

Reverter o cursor para o normal: document.body.style.cursor = 'default';

O seguinte é o meu método preferido, e mudarei o cursor sempre que uma página estiver prestes a mudar, ou seja beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

Usando jquery e css:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML: <div id="element">Click and wait</div>​

CSS: .wait {cursor:wait}​

Demo aqui

Substituir todos os elementos únicos

$("*").css("cursor", "progress");

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

Isso criará um cursor de carregamento até que sua chamada ajax seja bem-sucedida.

jQuery:
$("body").css("cursor", "progress");

de volta
$("body").css("cursor", "default");

Puro:
document.body.style.cursor = 'progress';

de volta
document.body.style.cursor = 'default';

Você não precisa de JavaScript para isso. Você pode alterar o cursor para o que quiser usando CSS:

selector {
    cursor: url(myimage.jpg), auto;
}

Veja aqui o suporte do navegador, pois existem algumas diferenças sutis dependendo do navegador

Aqui está outra coisa interessante que você pode fazer. Defina uma função para chamar antes de cada chamada de ajax. Também atribua uma função a ser chamada após a conclusão de cada chamada ajax. A primeira função definirá o cursor de espera e a segunda o limpará. Eles se parecem com o seguinte:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

Se salvar muito rápido, tente o seguinte:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

Definir o cursor como 'corpo' mudará o cursor para o fundo da página, mas não para os controles nela. Por exemplo, os botões ainda terão o cursor regular ao passar o mouse sobre eles. O seguinte é o que estou usando:

Para definir o cursor de 'espera', crie um elemento de estilo e insira no cabeçalho:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

Em seguida, para restaurar o cursor, exclua o elemento de estilo:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

Descobri que a única maneira de fazer com que o cursor efetivamente redefina seu estilo de volta ao que tinha antes de ser alterado para o estilo de espera era definir o estilo original em uma folha de estilo ou em tags de estilo no início da página, definir a classe do objeto em questão ao nome do estilo. Então, após o período de espera, você define o estilo do cursor de volta para uma string vazia, NÃO "padrão" e ele retorna ao seu valor original conforme definido nas suas tags de estilo ou folha de estilo. Definir como "padrão" após o período de espera apenas altera o estilo do cursor para cada elemento para o estilo chamado "padrão", que é um ponteiro. Não o altera de volta ao seu valor anterior.

Existem duas condições para fazer este trabalho. Primeiro você deve definir o estilo em uma folha de estilo ou no cabeçalho da página com tags de estilo, NÃO como um estilo embutido e, em segundo lugar, deve redefinir seu estilo, definindo o estilo de espera de volta para uma string vazia.