# Progress Documentation Shows the completion status of a task. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte

Uploading file... {Math.round(tween.current)}%

``` While often visually similar, progress bars and [Meters](/docs/components/meter) serve distinct purposes: **Progress**: - Shows **completion status** of a task - Value only increases as task progresses - Examples: File upload, installation status, form completion - Use when tracking advancement toward completion **Meter**: - Displays a **static measurement** within a known range (0-100) - Value can fluctuate up/down based on real-time measurements - Examples: CPU usage, battery level, sound volume - Use when showing current state relative to capacity If a meter better fits your requirements, check out the [Meter](/docs/components/meter) component. ## Structure ```svelte ``` ## Reusable Components It's recommended to use the `Progress` primitive to create your own custom meter component that can be used throughout your application. In the example below, we're using the `Progress` primitive to create a more comprehensive meter component. ```svelte

{label} {valueLabel}

``` You can then use the `MyProgress` component in your application like so: +page.svelte ```svelte ``` Of course, you'd want to apply your own styles and other customizations to the `MyProgress` component to fit your application's design. ## Accessibility If a visual label is used, the ID of the label element should be pass via the `aria-labelledby` prop to `Progress.Root`. If no visual label is used, the `aria-label` prop should be used to provide a text description of the progress bar. ## API Reference ### Progress.Root The progress bar component. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `max` | `number` | The maximum value of the progress bar.`Default: 100` | | | `min` | `number` | The minimum value of the progress bar.`Default: 0` | | | `value` | `number \| null` | The current value of the progress bar. If set to `null` the progress bar will be indeterminate.`Default: 0` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------------- | ----------------------------------------- | -------------------------------------- | ------- | | `data-value` | `''` | The current value of the progress bar. | | | `data-state` | `enum` - 'indeterminate' \| 'determinate' | The current state of the progress bar. | | | `data-min` | `''` | The minimum value of the progress bar. | | | `data-max` | `''` | The maximum value of the progress bar. | | | `data-indeterminate` | `''` | Present when the value is `null`. | | | `data-progress-root` | `''` | Present on the root element. | | [Previous Popover](/docs/components/popover) [Next Radio Group](/docs/components/radio-group)