# Progress

Visual indicator showing task completion percentage

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
"use client"

import * as React from "react"

import { Progress } from "@databricks/appkit-ui/react"

export default function ProgressExample() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}

```

## Progress[​](#progress-1 "Direct link to Progress")

Visual indicator showing task completion percentage

**Source:** [`packages/appkit-ui/src/react/ui/progress.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/progress.tsx)

### Props[​](#props "Direct link to Props")

| Prop            | Type                                       | Required | Default | Description |
| --------------- | ------------------------------------------ | -------- | ------- | ----------- |
| `value`         | `number \| null`                           |          | -       | -           |
| `max`           | `number`                                   |          | -       | -           |
| `getValueLabel` | `((value: number, max: number) => string)` |          | -       | -           |
| `asChild`       | `boolean`                                  |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Progress } from '@databricks/appkit-ui';

<Progress /* props */ />

```