20.01.2025

Como Definir o Cursor de 'Aguarde' para Toda a Sua Página HTML

Resposta Rápida

Para exibir o cursor de espera em todo o seu site HTML, você precisa definir a propriedade cursor do elemento body para wait. Você pode fazer isso utilizando a seguinte regra CSS:

body { cursor: wait; }

Este método permite que você substitua o cursor padrão por um ícone de espera para toda a página, informando aos usuários que um processamento ou carregamento está em andamento. Implementar esse comportamento não requer JavaScript—é uma solução simples e eficaz.

Alterações Dinâmicas de Cursor

Em algumas situações, pode ser necessário alterar dinamicamente o cursor, por exemplo, durante requisições Ajax. Isso pode ser feito utilizando jQuery ou JavaScript puro.

Usando jQuery

Se você prefere jQuery, pode adicionar uma classe wait ao elemento html quando a requisição Ajax começa e removê-la assim que o processamento estiver concluído. Aqui está um exemplo:

$(document).on("ajaxStart", function() {
  $('html').addClass('wait');
}).on("ajaxStop", function() {
  $('html').removeClass('wait');
});

Certifique-se de incluir a regra CSS correspondente:

html.wait, html.wait * {
  cursor: wait !important;
}

Com essa abordagem, o cursor de espera será exibido durante a duração das requisições Ajax, e !important permitirá que ela substitua outros estilos de cursor.

Usando JavaScript Puro

Se você prefere trabalhar sem jQuery, ainda é possível mudar o cursor utilizando JavaScript puro:

document.addEventListener('ajaxStart', function() {
  document.documentElement.classList.add('wait');
});
document.addEventListener('ajaxStop', function() {
  document.documentElement.classList.remove('wait');
});

Ao usar esse CSS, você obterá o mesmo resultado que com jQuery.

Considerando a Experiência do Usuário

Ao mudar o cursor para wait, é importante não obstruir a capacidade do usuário de interagir com a página. Evite bloquear elementos de controle enquanto os dados estão sendo carregados.

Lidando com Compatibilidade de Navegadores e Alternativas

Se você está usando jQuery, tenha em mente a necessidade de suportar versões mais antigas. Teste seu código em diversos navegadores para prevenir falhas inesperadas devido a problemas de compatibilidade.

Explorando o Manuseio de Conteúdo Complexo

Ao trabalhar com iframes ou plugins, lembre-se de que esses elementos podem não seguir os estilos da página pai. Você pode precisar definir o cursor individualmente para cada um deles.

Lidando com Páginas Curtas

Algumas páginas podem ter uma estrutura onde seu conteúdo não preenche toda a tela. Nesses casos, é recomendado estender os elementos body ou html para a altura total da janela:

html, body {
  min-height: 100%;
}

Dessa forma, o cursor de espera ainda será exibido, mesmo que não haja conteúdo na tela.

Visualização

Mudar o cursor na sua página pode ser comparado a cobrir um pomar inteiro com uma rede espessa:

Seu Pomar: [🍎🍐🍊🍋🍌] Rede: [🔗🔗🔗🔗🔗]

A rede cobre o pomar:

🌐⌛: [⌛🍎🍐🍊🍋🍌]

Como resultado, todo o pomar está seguramente coberto pela rede. Da mesma forma, o cursor de espera será representado ao longo de toda a página.

Mergulhando em Detalhes: Casos de Uso Adicionais

Usando um Div de Máscara

Outra abordagem para exibir o cursor de espera é usar um div de máscara:

<div class="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: wait;"></div>

Esse método funciona bem para bloquear temporariamente a entrada do usuário enquanto certas operações estão sendo executadas.

Suportando Interatividade do Usuário

Se você deseja permitir a interação com partes específicas da página durante a espera, pode definir o cursor padrão para determinados elementos:

.interactive-div {
  cursor: default;
}

Isso manterá partes da página acessíveis para ações dos usuários.

Recursos Úteis

1. cursor - CSS: Cascading Style Sheets | MDN — uma descrição detalhada da propriedade cursor na documentação do MDN.
2. cursor | CSS-Tricks — dicas e exemplos da propriedade cursor no site CSS-Tricks.
3. Propriedade cursor do CSS — uma demonstração interativa no W3Schools mostrando o uso do cursor wait.
4. Introduzindo os Novos Estilos de Cursor no CSS3 — SitePoint — um artigo da SitePoint sobre os novos recursos de cursor no CSS3.
5. Propriedade: readyState do documento - Web APIs | MDN — informações sobre o estado de carregamento do documento no MDN, úteis para sincronizar o cursor com o estado de carregamento da página.
6. Evento: load da janela - Web APIs | MDN — informações sobre o evento de carregamento da janela no MDN.

Video

Navigation