Adicione uma animação de carregamento ao seu site WordPress (10 opções diferentes)

Todos estão sempre com pressa, e um site que leva mais de 2 ou 3 segundos para carregar é considerado “muito lento”. Felizmente, existe uma maneira de contornar momentaneamente esse pânico e manter os usuários em um site por tempo suficiente para que as coisas carreguem. Estou falando sobre a animação de carregamento perfeitamente hipnótica.

Neste post, veremos o que é exatamente uma animação de carregamento, qual é seu propósito e como adicioná-la a qualquer site WordPress - incluindo seus sites Divi.

O que é uma animação de carregamento?

Uma animação de carregamento, também chamada de pré-carregador, é uma animação atraente que aparece em um site por tempo suficiente para que todos os elementos sejam carregados. Algumas animações de carregamento são curtas e não precisam prender a atenção do usuário por muito tempo. Mas, em alguns casos, se o site for muito grande, a animação de carregamento precisa ser realmente cativante para o usuário ficar por perto.

Se você já está por aí há bastante tempo, sabe que o carregamento de animações tem aparecido desde os anos 90. Mesmo no início da era da internet, tínhamos animações de carregamento. É claro que naquela época eles podiam durar muito mais tempo do que agora. Além disso, aprendemos como torná-los muito mais agradáveis ​​para o usuário sem entediá-los e navegar para longe.

Familiarizando-se com o carregamento de animações

O estilo mais comum de carregar animações é o círculo giratório. Não deve ser confundido com o “círculo do arco-íris da morte” dos computadores Apple. A animação de carregamento do círculo giratório tem um movimento gradiente escalonado. Os primeiros pré-carregadores giratórios tinham muitas versões diferentes, de flores a círculos, flocos de neve e até yangs giratórios. Hoje em dia, as animações de carregamento giratório são mais dinâmicas e mais agradáveis ​​de se olhar.

As animações de carregamento giratório só funcionam se o tempo de espera for curto. Mais de 5 segundos já é demais. É quando os desenvolvedores precisam usar mais pré-carregadores criativos. Uma divertida e divertida animação de carregamento manterá o usuário no site, não importa quanto tempo leve.

Dicas para carregar melhor as animações

Existem algumas coisas que você pode adicionar à animação de carregamento para torná-la mais interessante do que apenas uma imagem em movimento. Aqui estão algumas dicas para torná-los ainda melhores e mais eficazes.

• Incluir uma barra de porcentagem
• Mostra quanto tempo mais o usuário tem que esperar
• Explique o que está acontecendo nos bastidores (adereços para usar humor)
• Use uma animação divertida que não repita necessariamente a mesma ação exata

Os benefícios de uma animação de carregamento com marca

Se você tiver a oportunidade de criar sua própria animação de carregamento ou usar um plug-in com opções de personalização, certifique-se de que o pré-carregador tenha a marca. Isso pode ser tão simples quanto usar as cores do site da marca para realmente usar uma ilustração da empresa. A ideia por trás da marca de uma animação de carregamento é que ela parece pertencer ao site e não apenas um complemento. Esta rodada no site Awwwards pode inspirar suas próprias criações.

Como adicionar uma animação de carregamento ao seu site WordPress

Adicionar uma animação de carregamento é mais fácil do que você imagina. Existem várias opções sobre como adicionar um a um site WordPress. Desde plug-ins fáceis de usar até adicionar código personalizado ao site. Como existem tantas opções diferentes, vou listá-las aqui para que você possa dar uma olhada e descobrir qual delas funciona melhor para você.

Usando um plug-in para adicionar uma animação de carregamento

Um plugin é a maneira mais fácil e direta de adicionar uma animação de carregamento. Eles são especialmente úteis se você não se sentir confortável em mexer com o código ou se não tiver tempo. Aqui está uma lista de alguns dos plug-ins mais versáteis para carregar animações. Alguns deles são gratuitos e outros são premium. Em alguns casos, o mesmo plugin tem uma versão gratuita mais simples e uma versão profissional mais robusta.

Loftloader

O Loftloader tem uma versão gratuita e outra profissional. Na versão gratuita, você pode experimentar alguns dos proloaders e personalizá-los para combinar com o site e a marca. A versão pro tem mais opções e controles mais granulares.

Pré-carregador plano

Flat Preloader é um plugin gratuito simples com um conjunto limitado de animações coloridas de carregamento. Este plugin é perfeito se você precisa de uma solução rápida para um pré-carregador e não precisa personalizar as cores ou a imagem.

Best Preloader

Best Preloader é um plugin de animação de carregamento de uma opção gratuito que se adapta a qualquer estilo de site. Eu vim com uma animação com alguns controles de personalização.

Page Loader

O Page Loader é um plugin de animação de carregamento premium com muitas opções de personalização e marca. É um dos plug-ins de pré-carregador favoritos do mercado.

WP Smart Preloader

WP Smart Preloader é um plugin gratuito e de código aberto com opções de personalização completas. As animações não são muito elaboradas, mas combinam com qualquer estilo de website. Você pode personalizar as cores e as configurações com bastante facilidade.

Adicionando uma animação de carregamento sem um plug-in

Se você quiser evitar o uso de plug-ins, existem muitas animações de carregamento gratuitas e prontas para usar. Bem como alguns tutoriais avançados que fornecem os trechos de código que você precisa adicionar.

PixelBuddha com Multimídia:

O pessoal da Multimedia publicou um tutorial simples com dois conjuntos gratuitos de animações de carregamento do PixelBuddha e o código que você precisa para configurá-los em seu site.

CodePen:

Este artigo do Medium por UX Planet, o autor reúne muitas animações de carregamento em estilos diferentes. Existem alguns mais simples e outros mais complexos. A maioria deles é incorporada a partir do CodePen e você pode obter o snippet HTML e CSS do próprio widget. Você precisará inseri-los em um conjunto de códigos completo para uma configuração de animação de carregamento.

SpinKit:

Tobias Ashlink tem um SpinKit com uma bela coleção de animações de carregamento com o código disponível no GitHub. Eles também precisam ser adicionados a um conjunto de códigos completo para uma configuração pré-loaer.

Carregando.io:

Loading.io é uma coleção de animações de carregamento com muitas opções diferentes. Existem pré-carregadores CSS, pré-carregadores GIF, botões e muito mais. Examine o site deles para encontrar todas as opções e instruções sobre como adicioná-los ao seu site.

Pixelvars:

Os caras do Pixelvars escreveram um tutorial útil com todo o código que você precisa para configurar sua própria animação de carregamento. Você pode até usar seu código junto com as animações CodePen ou GitHub acima. Esta opção parece um pouco mais avançada para algumas pessoas. Vá em frente se você for um desenvolvedor com bons conhecimentos de codificação.

Com tantas opções, qual você escolherá?

Adicionar uma animação de carregamento a um site WordPress é fácil. Com tantas opções diferentes disponíveis, é só uma questão de escolher uma.

Nesta postagem, mostramos várias maneiras diferentes de adicionar uma animação de carregamento ao seu site. Qual é o seu método preferido? Projetado de forma personalizada e adicionado com código a um tema filho? Um plugin personalizável? Uma opção simples e sem frescuras? Deixe-nos saber nos comentários para que possamos verificar suas próprias animações de carregamento.

Imagem em destaque em muchomoros / shutterstock.com