---
title: "Progress"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-03-11
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/components/progress
---

# Progress Component

 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.

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


### Error

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