# or
yarn add @zag-js/progress @zag-js/svelte
```

## Anatomy

To set up the progress correctly, you'll need to understand its anatomy and how
we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the progress package into your project

```jsx
import * as progress from "@zag-js/progress"
```

The progress package exports two key functions:

- `machine` â The state machine logic for the progress widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
progress machine in your project ð¥

```svelte
<script lang="ts">
  import * as progress from "@zag-js/progress"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(progress.machine, { id })
  const api = $derived(progress.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getLabelProps()}>Upload progress</div>
  <div {...api.getTrackProps()}>
    <div {...api.getRangeProps()}></div>
  </div>
</div>
```

### Setting the value

Pass the `defaultValue` or `value` property to the machine function to set the
initial value of the progress bar.

```jsx {2}
const service = useMachine(progress.machine, {
  value: 50,
})
```

Subsequently, you can use the `api.setValue` method to set the value of the
progress bar.

```jsx
api.setValue(50)
```

### Setting the minimum and maximum values

By default, the progress bar has a minimum value of `0` and a maximum value of
`100`. You can change these values by passing the `min` and `max` options to the
machine.

```jsx {2-3}
const service = useMachine(progress.machine, {
  min: 0,
  max: 1000,
})
```

### Using the indeterminate state

The progress component is determinate by default, with the value and max set to
`50` and `100` respectively.

Set `value` to `null` to indicate an indeterminate value for operations whose
progress can't be determined (e.g., attempting to reconnect to a server).

```jsx {2}
const service = useMachine(progress.machine, {
  value: null,
})
```

### Showing a value text

Progress bars can only be interpreted by sighted users. To include a text
description to support assistive technologies like screen readers, use the
`valueText` part.

```jsx
const service = useMachine(progress.machine, {
  translations: {
    valueText: ({ value, max }) =>
      value == null ? "Loading..." : `${value} of ${max} items loaded`,
  },
})
```

Then you need to render the `valueText` part in your component.

```jsx
<div {...api.getValueTextProps()}>{api.valueAsString}</div>
```

## Styling guide

Earlier, we mentioned that each menu part has a `data-part` attribute added to
them to select and style them in the DOM.

```css
[data-scope="progress"][data-part="root"] {
  /* Styles for the root part */
}

[data-scope="progress"][data-part="track"] {
  /* Styles for the track part */
}

[data-scope="progress"][data-part="range"] {
  /* Styles for the range part */
}
```

### Indeterminate state

To style the indeterminate state, you can use the `[data-state=indeterminate]`
selector.

```css
[data-scope="progress"][data-part="root"][data-state="indeterminate"] {
  /* Styles for the root indeterminate state */
}

[data-scope="progress"][data-part="track"][data-state="indeterminate"] {
  /* Styles for the root indeterminate state */
}

[data-scope="progress"][data-part="range"][data-state="indeterminate"] {
  /* Styles for the root indeterminate state */
}
```

## Methods and Properties

### Machine Context

The progress machine exposes the following context properties:

<ContextTable name="progress" />

### Machine API

The progress `api` exposes the following methods:

<ApiTable name="progress" />

### Data Attributes

<DataAttrTable name="progress" />

### CSS Variables

<CssVarTable name="progress" />
Circular progress is a circular progress bar that can be used to show the
progress of a task such as downloading a file, uploading an image, etc.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/progress)
[Logic Visualizer](https://zag-visualizer.vercel.app/progress)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/progress)



**Features**

- Support for minimum and maximum values
- Support for indeterminate progress bars

## Installation

To use the progress machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/progress @zag-js/svelte