Trobber

O que é um throbber?

Throbber (do inglês throbber — pulsação, batimento) é um elemento gráfico animado que serve como indicador de ações em segundo plano, como carregamento de conteúdo, execução de tarefas ou implementação de comandos. Este elemento pode ser utilizado em sites, aplicativos ou programas de computador. Um exemplo clássico de throbber é o círculo giratório que aparece no navegador no lugar do favicon enquanto uma nova página da web está sendo carregada. Esses indicadores estão quase sempre presentes nas abas dos navegadores.

Características do throbber

O throbber, também conhecido como indicador de progresso assíncrono, é uma variante do pré-carregador. Ao contrário do indicador de progresso (barra de progresso), que mostra a porcentagem de conclusão ou o tempo restante, o throbber apenas demonstra que o processo de carregamento está em andamento. Ele frequentemente possui contornos pulsantes, criando um efeito visual que indica a inacababilidade do processo. Por isso, o throbber é às vezes chamado de pulsador.

Para que serve um throbber?

A primeira utilização do throbber ocorreu no início dos anos 1990 no navegador web NCSA Mosaic, que serviu de base para o Internet Explorer. Os desenvolvedores implementaram um indicador de atividade pulsante para informar aos usuários que o navegador estava funcionando e as páginas estavam sendo carregadas. A principal tarefa do throbber é mostrar ao usuário que o programa não travou, mas continua executando ações.

Funções adicionais

Além de informar sobre o processo de carregamento, o throbber melhora a experiência do usuário em relação ao site ou programa. Durante o carregamento de conteúdo, como estilos, fontes e imagens, os elementos podem ser carregados de forma desigual. O throbber oculta esses momentos desagradáveis, para que o usuário não veja elementos vazios ou que não estão sendo exibidos corretamente. Além disso, o throbber pode:

• Manter os usuários engajados, atraindo atenção com uma animação criativa.
• Distraí-los da espera, criando a ilusão de progresso rápido.
• Aumentar o reconhecimento da marca por meio de logotipos ou mensagens únicas.

Onde são utilizados os throbbers?

O throbber aparece quando o carregamento do site leva mais tempo do que o esperado ou quando não há resposta do servidor. Você pode ver o ícone de carregamento nos seguintes locais:

• Na aba do site no navegador.
• Na barra de pesquisa do navegador.
• Na tela durante o carregamento da página.
• Em elementos que estão carregando lentamente, como imagens ou vídeos.
• Em aplicativos móveis e programas.

O throbber pode ocultar totalmente o recurso ou permitir a interação com ele, como cancelar o carregamento ou voltar para a página inicial. Se o recurso estiver totalmente oculto, o usuário só pode aguardar o término do carregamento.

Variações de apresentação do throbber

Quando foi utilizado pela primeira vez nos navegadores web, os throbbers tinham a forma de um logotipo animado do programa, e isso continua sendo um método popular até hoje. Posteriormente, surgiu e se tornou comum o ícone giratório em forma de anel, conhecido como spinner. Ele pode ser visualizado em diferentes estilos, dependendo da identidade visual da empresa e do design do site.

Os principais requisitos para a animação de carregamento incluem sua dinamicidade. As opções mais comuns de pré-carregadores incluem:

• Pontos piscantes em forma de círculo.
• Caracteres em mudança em programas de console.
• GIFs animados ou animações CSS.

Como adicionar um throbber ao site sem conhecimentos de código

Para implementar uma animação de carregamento no site, você não precisa ser programador. Existem várias maneiras simples:

Serviços especializados

Use serviços online que permitem criar ou baixar uma animação de carregamento e gerar o código para inserção. Exemplos desses serviços:

• Construtor de pré-carregadores do Hello-site.ru.
• Codepen.
• Loading.io.
• Svgator.
• CSS Loader Generator.

Após criar a animação, basta copiar o código HTML ou CSS gerado.

Plugins para WordPress

Para sites em WordPress, existem plugins especiais, como LoftLoader, WP Smart Preloader ou "Pré-carregador". Após a instalação e ativação do plugin, você só precisa escolher o design desejado e configurar o elemento.

Funções integradas de construtores de sites

Em alguns construtores de sites, existem funções integradas para adicionar um throbber ou animação de carregamento. Por exemplo, no Tilda, você pode usar o elemento "microanimação", adicionando o bloco "T228" na parte superior da página.