Usadas recentemente

    Abra uma ferramenta e ela aparecerá aqui.

    Criador de barras de progresso

    Crie barras de progresso animadas

    Compartilhar esta ferramenta

    Relatar um problema

    Descreva o problema sem incluir dados ou arquivos privados.

    Quão útil foi esta ferramenta?

    Quão útil foi esta ferramenta?

    Personalize sua barra de progresso

    Escolha uma forma e um tema e ajuste os detalhes.

    Temas rápidos
    Mais configurações
    Dimensões e forma
    Cores e gradiente
    Configurações de borda
    Rótulos
    Animação e efeitos

    Prévia e código

    Fundo da prévia

    A prévia se ajusta a este painel. As dimensões exportadas e o código mantêm o tamanho escolhido.

    Prévia atualizada. Copie o HTML e o CSS para seu projeto.

    Prévia da exportação PNG

    O PNG é uma renderização estática com fundo branco. Ele usa o estilo original do canvas: gradientes e bordas são aplicados apenas a barras lineares; brilho CSS, listras, pulsação e transições estão disponíveis na prévia ao vivo e no código.

    Marcação HTML
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Carregando... 65%
  </div>
</div>
    Estilos CSS
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    O HTML e o CSS devem ser usados juntos. Eles descrevem este valor fixo; conecte as atualizações de progresso e a semântica de acessibilidade no seu aplicativo.

    Dicas rápidas
    • Linear: indicadores de carregamento e envio de arquivos.
    • Circular: medidores e representações de habilidades.
    • Semicircular: métricas de painéis e uso de cotas.
    • Vertical: indicadores de bateria e armazenamento.
    • Pontos: paginação e progresso em uma sequência.
    • Em etapas: marcos em processos com várias etapas.

    Sobre o Criador de barras de progresso, gerador gratuito de barras de progresso em CSS

    Crie barras de progresso bonitas e animadas, com cores, rótulos e efeitos configuráveis. Copie o HTML e o CSS juntos ou exporte um PNG estático nas dimensões escolhidas. Há seis formatos, seis temas e três curvas de transição. O PNG usa um renderizador de canvas separado: gradientes e bordas são aplicados apenas às barras lineares, e a animação CSS, as listras e o brilho não são incluídos. Revise o resultado no seu layout de destino antes de integrar este gerador de barras de progresso disponível online.

    Indicadores de progresso são um padrão essencial de interface na web e em aplicativos móveis. Eles mostram ao usuário o status de carregamento, a conclusão de tarefas, o nível de habilidade e o alcance de metas. Em vez de escrever o CSS à mão do zero, use nosso editor visual para configurar cada detalhe, como cores, raio da borda, listras, gradientes e rótulos, e depois copie o código gerado direto para o seu projeto.

    A ferramenta oferece uma prévia ao vivo em tempo real junto com uma prévia da exportação em canvas, para você ver exatamente como a barra de progresso ficará antes de decidir. Seja para um medidor de painel, um indicador de envio de arquivo, um assistente de várias etapas ou um indicador de paginação com pontos, o Criador de barras de progresso tem o estilo certo e o código limpo para isso.

    Design

    Adicionadas recentemente

    Todas as ferramentas

    Configurações de privacidade

    Escolha suas preferências de análise, publicidade e personalização. O armazenamento essencial mantém em funcionamento recursos como seu tema e as ferramentas salvas.

    O armazenamento essencial está sempre ativado.