Categorias

← View All Tools

Gerador de Barra de Progresso

Gerar barras de progresso personalizáveis a partir de dados, perfeito para mostrar status de conclusão, rankings ou valores comparativos

Dados para as barras de progresso. Suporta array JSON ou formato de texto simples etiqueta:valor

Título que será exibido acima do gráfico

Cores para as barras de progresso (cores hex separadas por vírgula). Deixe vazio para cores padrão.

Altura das barras horizontais ou largura das barras verticais em pixels

Valor máximo para a escala de progresso (deixe vazio para escala automática)

Valor mínimo para a escala de progresso

Valor alvo para exibir como linha de referência

Cor de fundo para o contêiner do gráfico

Exibir valores de porcentagem nas barras de progresso

Exibir valores reais nas barras de progresso

Animar as barras de progresso quando carregadas

Usar cantos arredondados para as barras de progresso

Exibir uma linha de referência para o valor alvo

Fatos principais

Categoria
Data Visualization
Tipos de entrada
textarea, text, select, number, color, checkbox
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Gerador de Barra de Progresso permite criar visualizações de dados claras e profissionais a partir de valores numéricos, sendo ideal para monitorar metas, exibir status de conclusão ou comparar desempenhos de forma intuitiva.

Quando usar

  • •Para visualizar o progresso de tarefas ou projetos em relação a uma meta definida.
  • •Para criar rankings comparativos entre diferentes categorias ou equipes.
  • •Para exibir indicadores de desempenho (KPIs) em apresentações ou relatórios de forma simplificada.

Como funciona

  • •Insira seus dados no campo de entrada usando o formato JSON ou o padrão etiqueta:valor.
  • •Personalize o visual ajustando a orientação, o estilo da barra e as cores conforme sua preferência.
  • •Configure limites como valor máximo, mínimo ou alvo para garantir que a escala do gráfico seja precisa.
  • •Gere o gráfico e utilize as opções de exibição para incluir porcentagens, valores reais ou animações.

Casos de uso

Acompanhamento de metas de vendas mensais por equipe.
Exibição de status de conclusão de etapas em projetos de desenvolvimento.
Comparação de métricas de engajamento em redes sociais.

Exemplos

1. Monitoramento de Metas de Vendas

Gerente de Vendas
Contexto
O gerente precisa apresentar o desempenho de quatro regiões de vendas em relação à meta trimestral de 100 mil.
Problema
Dificuldade em comunicar visualmente quais regiões estão próximas da meta e quais precisam de atenção.
Como usar
Inserir os dados das regiões, definir o valor máximo como 100000 e ativar a exibição de porcentagem.
Configuração de exemplo
chartData: Norte:85000, Sul:42000, Leste:95000, Oeste:60000; maxValue:100000; showPercentage:true
Resultado
Um gráfico de barras horizontais claro que destaca o desempenho de cada região, facilitando a tomada de decisão.

2. Status de Conclusão de Projeto

Gestor de Projetos
Contexto
O gestor está acompanhando o progresso de diferentes módulos de um software em desenvolvimento.
Problema
Necessidade de um gráfico rápido para relatórios semanais que mostre o avanço de cada módulo.
Como usar
Utilizar o formato JSON para inserir os valores de conclusão e aplicar o estilo de barra 'Gradiente' para um visual moderno.
Configuração de exemplo
chartData: [{"label": "UI", "value": 90}, {"label": "API", "value": 70}, {"label": "DB", "value": 40}]; barStyle:gradient; animated:true
Resultado
Barras de progresso animadas com gradiente que demonstram visualmente o status atual de cada módulo do projeto.

Testar com amostras

json, text
Exemplos PDF
Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10
preferred input family json
json
Exemplos de Análise de Logs ELK Stack
Exemplos completos de ELK Stack para agregação, processamento e visualização de logs em sistemas distribuídos
preferred input family json
json
Exemplos de Códigos QR
Imagens de código QR de exemplo para testar ferramentas de leitura e geração de código QR
preferred input family json
json
Amostras de Conversor Hex/Unicode
Amostras de teste para conversão de sequências de escape hex e unicode
preferred input family json
json

Hubs relacionados

Ferramentas de Json para Convert
Explore 100 ferramentas de json para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Text para Convert
Explore 80 ferramentas de text para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Json
Explore 43 ferramentas de json para fluxos de utility e encontre utilitários próximos com rapidez.
Ferramentas de Text
Explore 33 ferramentas de text para fluxos de utility e encontre utilitários próximos com rapidez.

FAQ

Quais formatos de dados são aceitos?

Você pode inserir dados como um array JSON (ex: [{"label": "A", "value": 50}]) ou em formato de texto simples (ex: Tarefa A:50).

Posso definir um valor alvo?

Sim, utilize o campo 'Valor Alvo' para definir uma linha de referência que será exibida sobre a barra de progresso.

É possível alterar a cor das barras?

Sim, você pode inserir códigos hexadecimais separados por vírgula no campo 'Cores das Barras' para personalizar o visual.

O gráfico suporta orientação vertical?

Sim, basta selecionar a opção 'Vertical' no menu de orientação para alternar o layout das barras.

As barras podem ser animadas?

Sim, ao marcar a opção 'Progresso Animado', as barras serão preenchidas com uma animação suave ao carregar o gráfico.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/progress-bar-generator

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
chartData textarea Sim Dados para as barras de progresso. Suporta array JSON ou formato de texto simples etiqueta:valor
chartTitle text Não Título que será exibido acima do gráfico
orientation select Não -
barStyle select Não -
barColors text Não Cores para as barras de progresso (cores hex separadas por vírgula). Deixe vazio para cores padrão.
barHeight number Não Altura das barras horizontais ou largura das barras verticais em pixels
maxValue number Não Valor máximo para a escala de progresso (deixe vazio para escala automática)
minValue number Não Valor mínimo para a escala de progresso
targetValue number Não Valor alvo para exibir como linha de referência
backgroundColor color Não Cor de fundo para o contêiner do gráfico
showPercentage checkbox Não Exibir valores de porcentagem nas barras de progresso
showValues checkbox Não Exibir valores reais nas barras de progresso
animated checkbox Não Animar as barras de progresso quando carregadas
rounded checkbox Não Usar cantos arredondados para as barras de progresso
showTarget checkbox Não Exibir uma linha de referência para o valor alvo

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-progress-bar-generator": {
      "name": "progress-bar-generator",
      "description": "Gerar barras de progresso personalizáveis a partir de dados, perfeito para mostrar status de conclusão, rankings ou valores comparativos",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-bar-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]