# Progress bar

Published: February 27, 2026

Version: ^2.13.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_13_0_progress_hero.png" alt="Progress bar component with a label and value. The label says: Current usage, and the value says: 49%" />

Meet the new **Progress** component — a simple, flexible progress bar for showing completion, upload status, or any value-over-max scenario in your app.

```blade
<flux:progress value="75" />
```

By default, the max is `100` and the bar uses your app's accent color. Let's take a look at what else it can do.

## Custom max values

Not everything is a percentage. Use the `max` prop for custom scales — steps in a wizard, files in a batch, levels in a game, whatever:

```blade
<flux:progress value="3" max="7" />
```

## Color and height

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_13_0_progress_color_and_height_combined.png" alt="A colored progress bar with a different height" />

Override the fill color with the `color` prop, and adjust the height with a Tailwind class:

```blade
<flux:progress value="75" color="purple" />

<flux:progress value="75" class="h-3" />
```

## Dynamic binding

Bind the progress value to a Livewire property using `wire:model` so it updates in real-time:

```blade
<flux:progress wire:model="progress" />
```

This is perfect for long-running tasks like file uploads, data imports, or background jobs where you want to reflect server-side progress as it happens.

## Accessibility

And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper ARIA attributes so that screen readers can communicate progress status just as well.

---

[Check out the progress docs →](https://fluxui.dev/components/progress)