---
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/zh-hant/components/progress
---

# Progress Component

進度元件可視覺化任務、下載或多步驟流程的完成狀態。進度條採用語意 HTML 進度元素和 Tailwind CSS 樣式構建，可以清楚地向使用者傳達進度。 The Frutjam progress system supports multiple colors, sizes, and animation states for flexible integration into loading screens, forms, and dashboards.

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                 | 類型 | 描述     |
| ------------------ | --- | ------ |
| progress           | 根據 | 水平進度條  |
| progress-primary   | 顏色 | 主要主題顏色 |
| progress-secondary | 顏色 | 次要主題色  |
| progress-accent    | 顏色 | 強調主題顏色 |
| progress-neutral   | 顏色 | 中性主題色  |
| progress-info      | 顏色 | 訊息語意顏色 |
| progress-success   | 顏色 | 成功語意色  |
| progress-warning   | 顏色 | 警告語意顏色 |
| progress-error     | 顏色 | 錯誤語意顏色 |

## 顏色選擇

### 預設

### 基本的

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

### 中學

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

### 口音

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

### 中性的

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

### 資訊

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

### 成功

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

### 警告

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

### 錯誤

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