Um leitor abre uma página, vê uma parede interminável de texto e sai. Não porque o conteúdo seja mau. O cérebro precisa de uma referência visual: quanto falta ler, em que ponto estou do processo. Uma barra de progresso resolve este problema através da psicologia da perceção.

Mas escolher um plugin para a tarefa é outra história. Um foi concebido para barras de competências em portefólios, outro para um pré-carregador de ecrã inteiro, um terceiro disfarça-se de bloco Gutenberg. Se errar na escolha, acaba com um construtor de sites pesado para uma pequena faixa.

Abaixo estão quatro plugins de barra de progresso comprovados para WordPress em 2026. Gratuitos e pagos, baseados em shortcodes e em blocos, cada um para o seu cenário.

💡 Visão geral rápida:

• Determine onde precisa de uma barra de progresso: indicador de leitura, barra de competências, pré-carregador ou bloco Gutenberg. A escolha do plugin depende disto.
• Para barras de competências e portefólios, escolha o Progress Bar & Skill Bar: gratuito, leve, 34 designs na versão Pro.
• Se precisar de um construtor visual com barras circulares, lineares e verticais sem dependência de shortcodes, StichyX Bar com pré-visualização ao vivo e gráficos SVG.
• Para utilizadores do Gutenberg, Ultimate Blocks: barra de progresso como um bloco nativo do editor, mais 35 blocos no pacote.
• Para um pré-carregador com um ecrã inicial animado, PageLoader, pagamento único de $26.

Tabela de comparação de plugins

1. Progress Bar & Skill Bar

Um plugin da WpShopMart para quem precisa de «mostrar competências em percentagens» sem dependências extra. Instale, ative, gere um shortcode e a barra já está na página. Sem editor de blocos, sem interface de construção: entre, configure cores e percentagens, copie [PROGRESSBAR_WP id=xx].

A versão gratuita tem dois designs: circular e linear. Ambos são animados, a barra preenche-se com cor de 0 até ao valor especificado ao fazer scroll. Por baixo, está uma grelha Bootstrap, pelo que a responsividade em telemóveis, tablets e computadores funciona sem configuração adicional.

A versão Pro por $8 (Personal, 1 site) ou $24 (Business, ilimitado) expande a biblioteca para 34 modelos e adiciona ordenação de elementos por arrastar e largar. Inclui um gráfico de meia pizza, gráfico semicircular, fundos seccionais, tipos de letra com ajuste fino e barras de competências ilimitadas por página.

Vantagens:

• A versão gratuita é totalmente funcional, sem limitações artificiais.
• O shortcode insere-se em qualquer lugar: num artigo, widget, tema.
• 52 avaliações no WordPress.org com uma classificação média de 4,5.
• Baseado em Bootstrap, não entra em conflito com a maioria dos temas.

Desvantagens:

• Não está atualizado para as últimas versões principais do WordPress (v1.5.0 testado até à 6.7.5).
• Versão gratuita limitada a dois designs.
• A interface de configurações está visualmente desatualizada.

💵 Grátis / Pro a partir de $8.

🔗 Descarregar no WordPress.org | 🔗 Versão Pro

2. StichyX Bar

Se os designs padrão não funcionam e não tem tempo para programar barras personalizadas manualmente, o StichyX Bar oferece-lhe um construtor visual com pré-visualização ao vivo diretamente no painel de administração. Horizontal, vertical, SVG circular: a geometria define-se num minuto, sem uma única linha de CSS.

Por baixo, está JavaScript puro, sem jQuery, sem bibliotecas de terceiros (exceto Chart.js para gráficos). A renderização SVG mantém a nitidez em ecrãs retina, e as definições de animação, de 500 a 5000 ms, permitem-lhe adequar o comportamento ao ritmo da página. Gatilhos: scroll, hover ou clique.

O Group Builder merece uma menção especial: várias barras são reunidas numa grelha de 1 a 3 colunas e animadas em cascata. Para uma página de portefólio ou «Sobre a equipa», uma grelha de competências pronta a usar sem um plugin de page builder. Emojis e ícones dentro da barra são suportados de raiz.

O plugin está em desenvolvimento ativo: v1.2.3 de junho de 2026, integração com Elementor e Gutenberg, suporte ACF para dados dinâmicos. Gratuito, sem complicações de versão Pro.

Vantagens:

• Construtor visual com pré-visualização ao vivo no painel de administração.
• Três geometrias (horizontal, vertical, SVG circular) num só plugin.
• Group Builder para grelhas de competências com animação em cascata.
• Vanilla JS, não carrega jQuery.

Desvantagens:

• Apenas 10 instalações ativas no WordPress.org, o plugin é muito recente.
• Um único programador, sem garantia de suporte a longo prazo.
• Sem pré-carregador e indicador de leitura (apenas barras de conteúdo).

💵 Grátis.

🔗 Descarregar no WordPress.org

3. Ultimate Blocks

Não é apenas um plugin de barra de progresso, mas um conjunto completo de 36 blocos Gutenberg, um dos quais é a Barra de Progresso. Instala-se como um bloco normal no editor: selecione círculo ou linha, defina a cor, espessura, percentagens e a barra anima ao fazer scroll.

A principal vantagem do Ultimate Blocks é o contexto. A barra de progresso aqui não é uma ferramenta isolada, mas parte de um ecossistema: no mesmo artigo pode adicionar Content Toggle (acordeão), Índice, Call to Action, bloco de Review com marcação schema. Nada de shortcodes, tudo é nativo no Gutenberg.

O plugin é desenvolvido ativamente: v3.5.7 de junho de 2026, mais de 50 000 instalações ativas, 728 avaliações com uma classificação média de 5 estrelas. A versão gratuita é generosa: Barra de Progresso, Filtro de Conteúdo, Classificação por Estrelas e mais duas dezenas de blocos sem pagamento.

Vantagens:

• Integração total com o Gutenberg, sem necessidade de aprender uma nova interface.
• 36 blocos num só plugin, a barra de progresso é apenas um deles.
• Desenvolvimento ativo (atualização em junho de 2026).
• Marcação schema nos blocos Review e HowTo.

Desvantagens:

• A barra de progresso não é o foco principal, mas uma de 36 funções.
• Não adequado para temas que não usam Gutenberg.
• Alguns blocos (Cupão, Timeline) apenas na versão Pro.

💵 Gratuito / Versão Pro.

🔗 Descarregar no WordPress.org

4. PageLoader

O PageLoader resolve uma tarefa adjacente: não é um indicador de leitura ou barra de competências, mas um pré-carregador de ecrã inteiro com uma barra de progresso. Um visitante chega ao site, vê um ecrã de abertura com carregamento animado. Quando a página está pronta, o pré-carregador desaparece suavemente.

Nas definições, define um tempo limite ou uma percentagem de carregamento real, imagem de fundo (sua ou da biblioteca), ícone, texto. A barra de progresso pode ser colocada em qualquer parte do ecrã, ajustar cor e espessura. O editor ao vivo integrado mostra as alterações em tempo real, sem necessidade de alternar entre o painel de administração e o site.

O plugin é compatível com todos os temas e dispositivos. Vendido no CodeCanyon sem versão gratuita: pagamento único, não uma subscrição.

Vantagens:

• O único pré-carregador de ecrã inteiro na seleção.
• Editor ao vivo com pré-visualização instantânea.
• Temporização de carregamento ajustada com precisão.
• Animações suaves de aparecimento e desaparecimento.

Desvantagens:

• Apenas versão paga (26 $).
• Não adequado para barras de competências e indicadores de leitura.
• Não é atualizado através do repositório WordPress.org.

💵 26 $ pagamento único (12 meses de suporte).

🔗 Página no CodeCanyon | 🔗 Demonstração ao vivo

As barras de progresso são uma microfuncionalidade e não vale a pena pagar a mais por ela com um construtor de sites com 50 blocos. Aqui estão três regras de seleção.

Se o site estiver no editor clássico e precisar de barras de competências, escolha o Progress Bar & Skill Bar. O shortcode [PROGRESSBAR_WP id=xx] insere-se em qualquer bloco de texto, widget ou tema. A versão gratuita cobre 80% das tarefas, a Pro por 8 $ expande o design.

Se precisar de um construtor visual e várias geometrias sem estar preso a um editor específico, StichyX Bar com pré-visualização ao vivo e gráficos SVG. Barras horizontais, circulares e verticais configuram-se no painel de administração num minuto.

Se o site estiver no Gutenberg e a barra de progresso for apenas uma das necessidades, instale o Ultimate Blocks. A barra de progresso vem com índice, acordeão, CTA e bloco de Review. Um plugin em vez de cinco.

Se precisar de um pré-carregador de ecrã inteiro, PageLoader. A única ferramenta na seleção para ecrã de abertura de carregamento, com um pagamento único sem subscrições.

No vídeo acima, um processo passo a passo de instalação e configuração de uma barra de progresso no WordPress: desde a escolha do plugin até à publicação numa página.

⁉️🤔 Perguntas frequentes

Em que é que uma barra de progresso difere de um pré-carregador?

Uma barra de progresso mostra uma percentagem dentro do conteúdo: competência, etapa de funil, indicador de leitura. Um pré-carregador é um ecrã de abertura antes de o site carregar: o visitante vê uma barra ou animação enquanto a página é renderizada. O PageLoader é um pré-carregador; o Progress Bar & Skill Bar e o StichyX Bar são barras de conteúdo.

Posso instalar uma barra de progresso sem um plugin?

Tecnicamente sim, através de HTML <progress>, animações CSS e JavaScript. Mas sem um plugin perde: editor visual, responsividade pronta a usar, inserção fácil via shortcode ou bloco. Para um utilizador não técnico, um plugin poupa 2 a 3 horas de codificação manual em cada barra.

Qual é o melhor plugin para o Gutenberg?

Ultimate Blocks, o único na seleção com um bloco nativo do Gutenberg. A barra de progresso é inserida como um bloco, as definições na barra lateral do editor. Sem necessidade de sair da interface, copiar shortcodes ou alternar para o painel de administração. O StichyX Bar também suporta um bloco Gutenberg, mas o seu foco é um construtor visual, não um ecossistema de blocos.

Uma barra de progresso afeta a velocidade do site?

Um plugin de qualidade (Progress Bar & Skill Bar, StichyX Bar) adiciona 2 a 5 KB de CSS e 1 a 3 KB de JS, isto não afeta o LCP. O Ultimate Blocks carrega mais por causa dos 36 blocos, mas de forma assíncrona e apenas os utilizados. Os pré-carregadores (PageLoader) carregam primeiro e podem adicionar 200 a 500 ms ao FCP, o que vale a pena considerar. Todos os quatro plugins na seleção carregam estilos de forma assíncrona e não bloqueiam a renderização.

É necessária uma versão Pro para barras circulares?

Depende do plugin. Progress Bar & Skill Bar: barras circulares apenas na Pro (8 $). StichyX Bar: barras circulares SVG gratuitas no construtor visual. Ultimate Blocks: circulares e lineares gratuitas no bloco Gutenberg.

💎 O que instalar em 2026: resumo final

Não há uma resposta universal, o cenário dita a escolha.

• Se o site estiver no editor clássico e precisar de barras de competências, Progress Bar & Skill Bar. 34 designs na Pro, shortcode sem dependência de editor, baseado em Bootstrap.
• Se precisar de várias geometrias com pré-visualização ao vivo, StichyX Bar. Construtor visual, círculos SVG, grelhas de competências e nem uma linha de CSS.
• Se o site vive no Gutenberg, Ultimate Blocks. Barra de progresso como bloco nativo, mais índice, acordeão e CTA num só plugin.
• Se precisar de um ecrã de abertura de carregamento, PageLoader. A única opção entre os quatro que cobre especificamente um pré-carregador, não barras de conteúdo.

Comece com o Progress Bar & Skill Bar gratuito: em 5 minutos instala a primeira barra e percebe se dois designs são suficientes para si. E que plugin de barra de progresso utiliza, escreva nos comentários.