---
title: "Progress"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Progress using native HTML elements. Animated fills with multiple sizes and colors for loading states, task completion, and step indicators."
url: https://frutjam.com/pl/components/progress
---

# Progress Component

Komponenty postępu wizualizują stan ukończenia zadań, pobrań lub procesów wieloetapowych. Paski postępu, zbudowane z semantycznych elementów postępu HTML i stylu CSS Tailwind, wyraźnie komunikują użytkownikom postęp. System postępu Frutjam obsługuje wiele kolorów, rozmiarów i stanów animacji, co pozwala na elastyczną integrację z ekranami ładowania, formularzami i pulpitami nawigacyjnymi.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa              | Typ     | Opis                          |
| ------------------ | ------- | ----------------------------- |
| progress           | Opierać | Poziomy pasek postępu         |
| progress-primary   | Kolor   | Podstawowy kolor motywu       |
| progress-secondary | Kolor   | Kolor motywu drugorzędnego    |
| progress-accent    | Kolor   | Kolor motywu akcentującego    |
| progress-neutral   | Kolor   | Neutralny kolor motywu        |
| progress-info      | Kolor   | Kolor semantyczny informacji  |
| progress-success   | Kolor   | Sukces semantyczny kolor      |
| progress-warning   | Kolor   | Ostrzeżenie kolor semantyczny |
| progress-error     | Kolor   | Błąd koloru semantycznego     |

## Warianty kolorystyczne

### Domyślny

### Podstawowy

```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>
```

### Wtórny

```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>
```

### Akcent

```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>
```

### Neutralny

```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>
```

### Informacje

```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>
```

### Sukces

```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>
```

### Ostrzeżenie

```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>
```

### Błąd

```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>
```