# Progress Linear

An indicator showing the progress or completion of a task.

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Progress>
			<Progress.Label>
				<Progress.ValueText />
			</Progress.Label>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## Color

Provide background color values for the track and range to customize the colors.

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Color() {
	return (
		<div className="flex w-full flex-col gap-8">
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-primary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-secondary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-tertiary-500" />
				</Progress.Track>
			</Progress>
		</div>
	);
}

```

## Height

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Height() {
	return (
		<div className="flex w-full flex-col gap-8">
			<Progress>
				<Progress.Track className="h-1">
					<Progress.Range />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="h-4">
					<Progress.Range />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="h-6">
					<Progress.Range />
				</Progress.Track>
			</Progress>
		</div>
	);
}

```

## Orientation

For vertical orieintation, a height must be defined on the Track component. The default is `h-[100px]`.

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Orientation() {
	return (
		<Progress orientation="vertical">
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## Indeterminate

You must explicitely specify a `null` value to trigger indeterminate mode.

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Indeterminate() {
	return (
		<Progress value={null}>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

### Custom Animation

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function CustomAnimation() {
	return (
		<>
			<Progress value={null}>
				<Progress.Track>
					<Progress.Range className="animate-[custom-animation_2s_ease-in-out_infinite]" />
				</Progress.Track>
			</Progress>
			<style>{`
                @keyframes custom-animation {
                    from {
                        scale: 0.5 1;
                        transform: translateX(-200%);
                    }
                    25% {
                        transform: translateX(50%);
                    }
                    50% {
                        transform: translateX(-50%);
                    }
                    75% {
                        transform: translateX(150%);
                    }
                    to {
                        scale: 0.5 1;
                        transform: translateX(200%);
                    }
                }
            `}</style>
		</>
	);
}

```

Consider using following variants to target the orientation and state.

* `data-[orientation=horizontal]:my-custom-animation` - target the horizontal orientation.
* `data-[orientation=vertical]:my-custom-animation` - target the vertical orientation.
* `data-[state=indeterminate]:my-custom-animation` - target the indeterminate state.

## Native Alternative

The native [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) element is available cross browser, but does not support indeterminate animations.

```tsx
export default function Native() {
	return <progress className="progress" value="50" max="100" />;
}

```

## Direction

```tsx
import { Progress } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<Progress dir="rtl">
			<Progress.Label>Label</Progress.Label>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## API Reference

### ProgressRootProps

| Property       | Default               | Type                                                                                    | Description                                                                                                                |
| -------------- | --------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| ids?           | -                     | Partial\<\{ root: string; track: string; label: string; circle: string; }> \| undefined | The ids of the elements in the progress bar. Useful for composition.                                                       |
| value?         | -                     | number \| null \| undefined                                                             | The controlled value of the progress bar.                                                                                  |
| defaultValue?  | 50                    | number \| null \| undefined                                                             | The initial value of the progress bar when rendered.&#xA;Use when you don't need to control the value of the progress bar. |
| min?           | 0                     | number \| undefined                                                                     | The minimum allowed value of the progress bar.                                                                             |
| max?           | 100                   | number \| undefined                                                                     | The maximum allowed value of the progress bar.                                                                             |
| translations?  | -                     | IntlTranslations \| undefined                                                           | The localized messages to use.                                                                                             |
| onValueChange? | -                     | ((details: ValueChangeDetails) => void) \| undefined                                    | Callback fired when the value changes.                                                                                     |
| formatOptions? | \{ style: "percent" } | NumberFormatOptions \| undefined                                                        | The options to use for formatting the value.                                                                               |
| locale?        | "en-US"               | string \| undefined                                                                     | The locale to use for formatting the value.                                                                                |
| dir?           | "ltr"                 | "ltr" \| "rtl" \| undefined                                                             | The document's text/writing direction.                                                                                     |
| getRootNode?   | -                     | (() => ShadowRoot \| Node \| Document) \| undefined                                     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 |
| orientation?   | "horizontal"          | "horizontal" \| "vertical" \| undefined                                                 | The orientation of the element.                                                                                            |
| element?       | -                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                          | Render the element yourself                                                                                                |

### ProgressRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | ProgressApi\<PropTypes>                                        | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressRootContextProps

| Property | Default | Type                                             | Description |
| -------- | ------- | ------------------------------------------------ | ----------- |
| children | -       | (progress: ProgressApi\<PropTypes>) => ReactNode | -           |

### ProgressLabelProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressValueTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### ProgressTrackProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressRangeProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### ProgressCircleProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined | Render the element yourself |

### ProgressCircleTrackProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | Render the element yourself |

### ProgressCircleRangeProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | Render the element yourself |