Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Progress

Visual indicator showing task completion percentage

## Example​

    "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​

Visual indicator showing task completion percentage

Source: `packages/appkit-ui/src/react/ui/progress.tsx`

### Props​

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

### Usage​

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

    <Progress /* props */ />