---
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/tr/components/progress
---

# Progress Component

İlerleme bileşenleri; görevlerin, indirmelerin veya çok adımlı süreçlerin tamamlanma durumunu görselleştirir. Anlamsal HTML ilerleme öğeleri ve Tailwind CSS stiliyle oluşturulan ilerleme çubukları, ilerlemeyi kullanıcılara net bir şekilde iletir. Frutjam ilerleme sistemi, yükleme ekranlarına, formlara ve kontrol panellerine esnek entegrasyon için birden fazla rengi, boyutu ve animasyon durumunu destekler.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf              | Tip   | Tanım                 |
| ------------------ | ----- | --------------------- |
| progress           | Temel | Yatay ilerleme çubuğu |
| progress-primary   | Renk  | Birincil tema rengi   |
| progress-secondary | Renk  | İkincil tema rengi    |
| progress-accent    | Renk  | Vurgu teması rengi    |
| progress-neutral   | Renk  | Nötr tema rengi       |
| progress-info      | Renk  | Bilgi anlamsal rengi  |
| progress-success   | Renk  | Başarı anlamsal rengi |
| progress-warning   | Renk  | Uyarı anlamsal rengi  |
| progress-error     | Renk  | Hata anlamsal rengi   |

## Renk çeşitleri

### Varsayılan

### Öncelik

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

### İkincil

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

### Aksan

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

### Doğal

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

### Bilgi

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

### Başarı

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

### Uyarı

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

### Hata

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