Progress Bar Generator
Crie barras de progresso CSS personalizadas com pré-visualização ao vivo. Escolha estilo, cores, raio e exporte HTML + CSS.
① Defina a percentagem e escolha um estilo ② Ajuste cores e altura ③ Copie o CSS e o HTML
#C9B89A
#2A2A2A
Preview
Output
/* CSS */
.progress-wrap {
background: #2a2a2a;
border-radius: 999px;
height: 20px;
overflow: hidden;
position: relative;
}
.progress-bar {
width: 65%;
height: 100%;
border-radius: 999px;
transition: width 0.3s;
background: #c9b89a;
}
/* HTML */
<div class="progress-wrap">
<div class="progress-bar"></div>
</div>O que é uma barra de progresso CSS?
Uma barra de progresso CSS é um componente de UI que representa visualmente a conclusão de uma tarefa. Construída com HTML e CSS puros, não requer JavaScript para exibição estática. O wrapper externo fornece a pista (fundo), enquanto o div interno preenche proporcionalmente usando width: {percentagem}%. Barras listradas usam repeating-linear-gradient a 45 graus. Barras animadas aplicam uma animação background-position para simular movimento.
Perguntas frequentes
Uma barra de progresso CSS é um componente visual composto por dois divs aninhados: um wrapper (a pista) e uma barra interna cuja largura percentual reflete a conclusão.
As listras usam repeating-linear-gradient a 45 graus alternando a cor da barra e uma variante semitransparente a cada 10px.
Ambos usam o mesmo padrão repeating-linear-gradient. A versão animada aplica adicionalmente uma animação background-position que desloca o gradiente horizontalmente.
O wrapper deve ser definido como width: 100% para preencher seu contêiner. A barra interna usa uma largura percentual sempre relativa ao wrapper.
Sim. Defina uma propriedade CSS personalizada como --progress e atualize-a via element.style.setProperty("--progress", value + "%").
Barras arredondadas (border-radius: 999px) adequam-se a interfaces modernas. Cantos nítidos (0) combinam com dashboards geométricos.
Sim. Use o elemento HTML nativo <progress> ou adicione role="progressbar" aria-valuenow aria-valuemin aria-valuemax ao div wrapper.