---
## 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
```
```svelte
```
### 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 | `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 | 80 | Diameter of the circular indicator in pixels. |
| class | `string` | no | | Extra classes merged onto the root wrapper element. |
| formatValue | `(value: number, max: number) => string` | no | (v, max) => `${Math.round((v/max) * 100)}%` | Format function for the displayed value. |
| label | `string` | no | | Text label displayed above or inside the progress indicator. |
| 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 ``. 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 numeric value (percentage or absolute) next to the label. |
| slotClasses | `Partial>` | 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. |
| striped | `boolean` | no | false | Display striped pattern on the fill. |
| strokeWidth | `number` | no | 6 | Stroke width of the circular indicator in pixels. |
| unstyled | `boolean` | no | | Remove all default tv() classes. |
| value | `number` | no | | Current progress value (0–100). 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, 'children' | 'class'> (omit-pattern)