---
title: "Progresso"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Progresso CSS do Tailwind usando elementos HTML nativos. Preenchimentos animados com vários tamanhos e cores para estados de carregamento, conclusão de tarefas e indicadores de etapas."
url: https://frutjam.com/pt-br/components/progress
---

# Componente de progresso

Progress components visualize the completion status of tasks, downloads, or multi-step processes. Built with semantic HTML progress elements and Tailwind CSS styling, progress bars communicate progress clearly to users. The Frutjam progress system supports multiple colors, sizes, and animation states for flexible integration into loading screens, forms, and dashboards.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class              | Tipo  | Description             |
| ------------------ | ----- | ----------------------- |
| progress           | Base  | Horizontal progress bar |
| progress-primary   | Color | Primary theme color     |
| progress-secondary | Color | Secondary theme color   |
| progress-accent    | Color | Accent theme color      |
| progress-neutral   | Color | Neutral theme color     |
| progress-info      | Color | Info semantic color     |
| progress-success   | Color | Success semantic color  |
| progress-warning   | Color | Warning semantic color  |
| progress-error     | Color | Error semantic color    |

## Color variants

### Default

### Primary

```html
<progress class="progress progress-primary w-56" value="0" max="100"></progress>
<progress class="progress progress-primary w-56" value="25" max="100"></progress>
<progress class="progress progress-primary w-56" value="50" max="100"></progress>
<progress class="progress progress-primary w-56" value="75" max="100"></progress>
<progress class="progress progress-primary w-56" value="100" max="100"></progress>
```

### Secondary

```html
<progress class="progress progress-secondary w-56" value="0" max="100"></progress>
<progress class="progress progress-secondary w-56" value="25" max="100"></progress>
<progress class="progress progress-secondary w-56" value="50" max="100"></progress>
<progress class="progress progress-secondary w-56" value="75" max="100"></progress>
<progress class="progress progress-secondary w-56" value="100" max="100"></progress>
```

### Accent

```html
<progress class="progress progress-accent w-56" value="0" max="100"></progress>
<progress class="progress progress-accent w-56" value="25" max="100"></progress>
<progress class="progress progress-accent w-56" value="50" max="100"></progress>
<progress class="progress progress-accent w-56" value="75" max="100"></progress>
<progress class="progress progress-accent w-56" value="100" max="100"></progress>
```

### Neutral

```html
<progress class="progress progress-neutral w-56" value="0" max="100"></progress>
<progress class="progress progress-neutral w-56" value="25" max="100"></progress>
<progress class="progress progress-neutral w-56" value="50" max="100"></progress>
<progress class="progress progress-neutral w-56" value="75" max="100"></progress>
<progress class="progress progress-neutral w-56" value="100" max="100"></progress>
```

### Info

```html
<progress class="progress progress-info w-56" value="0" max="100"></progress>
<progress class="progress progress-info w-56" value="25" max="100"></progress>
<progress class="progress progress-info w-56" value="50" max="100"></progress>
<progress class="progress progress-info w-56" value="75" max="100"></progress>
<progress class="progress progress-info w-56" value="100" max="100"></progress>
```

### Success

```html
<progress class="progress progress-success w-56" value="0" max="100"></progress>
<progress class="progress progress-success w-56" value="25" max="100"></progress>
<progress class="progress progress-success w-56" value="50" max="100"></progress>
<progress class="progress progress-success w-56" value="75" max="100"></progress>
<progress class="progress progress-success w-56" value="100" max="100"></progress>
```

### Warning

```html
<progress class="progress progress-warning w-56" value="0" max="100"></progress>
<progress class="progress progress-warning w-56" value="25" max="100"></progress>
<progress class="progress progress-warning w-56" value="50" max="100"></progress>
<progress class="progress progress-warning w-56" value="75" max="100"></progress>
<progress class="progress progress-warning w-56" value="100" max="100"></progress>
```

### Erro

```html
<progress class="progress progress-error w-56" value="0" max="100"></progress>
<progress class="progress progress-error w-56" value="25" max="100"></progress>
<progress class="progress progress-error w-56" value="50" max="100"></progress>
<progress class="progress progress-error w-56" value="75" max="100"></progress>
<progress class="progress progress-error w-56" value="100" max="100"></progress>
```