--- ## 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)