pui

1.0.2

A Phoenix LiveView UI toolkit

HexDocs Report package

Current section

Files

Jump to

Documentation 41 Versions 2 Dependencies Dependants Files Activity

pui guides progress.md

Raw

guides/progress.md

# PUI.Progress

`PUI.Progress` renders an accessible progress bar for completion and loading
states. The host LiveView owns the value and can update it through assigns.

## Usage

```heex
<.progress value={42} label="Upload progress" />
<.progress value={3} min={0} max={10} value_text="3 of 10 items" />
<.progress value={75} class="h-3" />
```

## LiveView updates

```elixir
def handle_info({:upload_progress, value}, socket) do
  {:noreply, assign(socket, upload_progress: value)}
end
```

```heex
<.progress value={@upload_progress} label="Upload progress" />
```

## Attributes

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `min` | `float` | `0.0` | Minimum progress value |
| `max` | `float` | `100.0` | Maximum progress value |
| `value` | `float` | `0.0` | Current progress value |
| `label` | `string` | `nil` | Accessible label for the progressbar |
| `aria_labelledby` | `string` | `nil` | ID of an element labelling the progressbar |
| `value_text` | `string` | `nil` | Human-readable value announced by screen readers |
| `class` | `string` | `""` | Additional CSS classes |

The canonical module is `PUI.Progress`. Existing
`PUI.Components.progress/1` calls remain available as deprecated compatibility
wrappers.

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT