# ASCII Progress

> Progress bars with eighth-block precision, in five styles.

Category: Interface. Docs: https://asciicn.sumak.dev/docs/ascii-progress

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-progress
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiProgress } from "@/components/ascii/ascii-progress"

<AsciiProgress value={62} label="upload" />
<AsciiProgress value={62} variant="arrow" width={20} />
```

## Examples

### Every variant

Five glyph sets. `blocks` uses eighth-width partials, so a 24-character bar moves in 192 steps.

```tsx
{(["blocks", "shade", "hash", "arrow", "dots"] as const).map((v) => (
  <AsciiProgress key={v} value={value} variant={v} label={v.padEnd(6)} />
))}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` |  | 0 to 100. |
| `width` | `number` | `24` | Bar width in characters. |
| `variant` | `"blocks" | "shade" | "hash" | "arrow" | "dots"` | `"blocks"` | Blocks use eighth-width partials. |
| `label` | `string` |  | Shown before the bar and used as the accessible name. |
| `showValue` | `boolean` | `true` | Show the percentage. |

## Notes

- **Accessibility.** A real `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax`. The glyphs and the percentage are `aria-hidden`.
- **Layout.** Every character has the same width, so the bar never reflows as it fills. Numbers use `tabular-nums`.
- **Dependencies.** None. Plain text in a `<div>`, safe in Server Components.