---

## Progress
Progress indicator for determinate and indeterminate loading states.
Supports linear bar and circular ring variants with semantic intents and animation.

**Import:** `import { Progress } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Progress value={65} label="Upload progress" showValue />
```

```svelte
<Progress value={80} shape="circular" intent="success" showValue />
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: primary)
- size: lg, md, sm, xs (default: md)
- animated: true (default: false)
- indeterminate: true (default: false)
- striped: true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
| ...ProgressVariants | `VariantProps` | no |  | Styling variants from ProgressVariants |
| animated | `boolean` | no | false | Animate the striped pattern. Requires `striped` to be true. |
| circularSize | `number` | no |  | Diameter of the circular indicator in pixels. Unset, the ring follows `size`: 48, 64, 80 or 112 px for `xs` to `lg`. |
| class | `string` | no |  | Extra classes merged onto the root wrapper element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| formatValue | `(value: number, max: number) => string` | no |  | Format function for the displayed value. Receives the clamped value and `max`, not `min` — a formatter for a range that does not start at 0 has to know `min` itself. Without one, the value shows as the rounded percentage of the `min`–`max` range the fill draws, 0% for an empty range. |
| label | `string` | no |  | Accessible name of the progressbar (`aria-label`, falling back to the localized "Progress"). The linear shape also shows it above the track; the circular shape shows no text label at all. |
| max | `number` | no | 100 | Maximum value for the progress range. |
| min | `number` | no | 0 | Minimum value for the progress range. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Progress: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| shape | `'linear' | 'circular'` | no | 'linear' | Shape of the progress indicator. |
| showValue | `boolean` | no | false | Show the formatted value (see `formatValue`) in the row above the linear track, or centred inside the circular ring. Hidden while indeterminate. |
| slotClasses | `Partial<Record<ProgressSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: wrapper (linear root — what `class` targets in linear shape) | header | label | valueText | track | fill | circularWrapper (circular root — what `class` targets in circular shape) | circularTrack | circularFill | circularLabel. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| striped | `boolean` | no | false | Display striped pattern on the fill. |
| strokeWidth | `number` | no |  | Stroke width of the circular indicator in pixels. Unset, the stroke follows `size`: 3, 4, 6 or 8 px for `xs` to `lg`. |
| unstyled | `boolean` | no |  | Remove all default tv() classes. |
| value | `number` | no |  | Current progress on the `min`–`max` scale, clamped into it. Omit for indeterminate mode. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Progress. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| size | `'lg' | 'md' | 'sm' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Progress. Affects the component's physical footprint. Available options: lg, md, sm, xs. |
| indeterminate | `'true'` | no | false | Controls the indeterminate behavior and appearance of the Progress component. Available options: true. |

Inherited from:
- ProgressVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)

### Slots (slotClasses keys)
`wrapper`, `header`, `label`, `valueText`, `track`, `fill`, `circularWrapper`, `circularTrack`, `circularFill`, `circularLabel`