Diversos

Como criar barra de progresso no WordPress com o Pace

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Se você tem procurado como implementar uma barra de carregamento em seu site ou blog, provavelmente vai gostar do Pace. É um script grátis que, uma vez chamado no cabeçalho e em conjunto com uma folha de estilos, exibirá um dos indicadores de progresso no carregamento de suas páginas. É de extrema facilidade na aplicação, e com um mínimo de conhecimento de CSS também pode ser modificado e até novos modelos de indicadores criados.

Com menos de 10KB, basta escolher a cor para o tema que será usado (feito diretamente na página do Pace), e baixar os arquivos que serão enviados para seu servidor. Então, com poucas linhas na seção header do seu site, a barra de progresso escolhida já estará funcionando. Além de barras propriamente ditas, há também indicadores circulares, deslizantes e com a porcentagem carregada.

A barra de progresso pode ser útil para o visitante, já que o ajuda a saber se o conteúdo foi completamente baixado. Se houver erros na exibição, por exemplo, pela falta da folha de estilos ou de alguma imagem, ele saberá pelo indicador que foi falha da conexão e provavelmente não no design do seu site.

E claro, também serve pra enfeitar e dar um diferencial ao visual do seu blog.

Como usar

Siga até o site do Pace. Ali você vê os modelos disponíveis de indicadores nas miniaturas. Clique com o botão direito em “PACE.JS”, em “DOWNLOAD”, e escolha “Salvar link como…”, para salvar o script do Pace em seu computador.

Clique então em “Choose a Color”, em “Themes”, e escolha a cor que prefere para seu indicador.

escolha a cor

Com a cor alterada, escolha o indicador favorito e clique no link “Download” logo acima de sua miniatura. Será aberta na mesma janela a folha de estilos daquele indicador. Copie todo esse texto e salve-o em um arquivo de texto simples (tipo do Bloco de Notas) com a extensão .css em alguma pasta do seu tema no WordPress – pode ser uma pasta “js > pace”.

pasta js do tema
Uma opção é salvar os arquivos numa pasta “pace”, dentro da pasta “js” ou outra do seu template.

Ou seja, agora você tem dois arquivos, o “pace.min.js” e o “pace.css”. Coloque ambos dentro de uma pasta chamada “pace”, e essa pasta dentro da pasta “js” do seu tema. Se a pasta js não existir, crie uma.

No cabeçalho do seu tema, geralmente no arquivo header.php, procure pela seção <head> e dentro dela coloque:

<script src="js/pace/pace.min.js"></script>
<link href="js/pace/pace-bounce.css" rel="stylesheet" />

Não esqueça de corrigir o caminho para o lugar em que colocou os arquivos. Mande tudo pro servidor e… só isso, já deve está funcionando. Os estilos disponíveis por enquanto são:

  • Minimal – bem parecido com a barra de carregamento do YouTube.
  • Barber Shop – barra mais grossa e zebrada.
  • Big Counter – contador de porcentagem carregada.
  • Bounce – uma esfera saltitando no canto da tela.
  • Center Circle – porcentagem carregada girando no meio da tela dentro de um disco.
  • Corner Indicator – um disco complexo no canto da tela.
  • Fill Left – a cor escolhida vai preenchendo o fundo da página a partir da esquerda.
  • Flat Top – similar ao Minimal, mas espessa.
  • Loading Bar – uma barra de carregamento no centro da tela.
  • Mac OSX – barra no topo, visual semelhante às barras de loading do SO da Apple.

Quer mudar o estilo da sua barra de progresso? Basta voltar ao site do Pace, copiar o estilo do novo indicador e colar tudo no lugar do estilo anterior, no arquivo pace.css. Visite o site de vez em quando para ver se tem alguma novidade, pois novos estilos de indicadores podem aparecer em breve. Também dá pra fazer alterações nos estilos, aumentando tamanho de fonte e criando novos efeitos.

Se tiver dúvidas quando ao uso e implementação, comente.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

7 Comentários

  1. Arture Brandão Responder

    Daniel, me tira uma dúvida… conheci o pace agora, e queria saber se tem como só exibir a página após o carregamento (100%)?

  2. Jack Jonh Black Responder

    Embora esse tuto vem a calhar…. eu uso o plugin wp-pace… mas como menos plugins é mais no worpress.. valeu pelo tuto….

    • Legal, eu não sabia que tinha o plugin, mas afinal de contas é sempre bom mesmo eliminá-los.

Deixe um Comentário

Pin