---
title: Progress bar
description: Progress Bar displays the progress of a task or operation, showing completion percentage and optional status messages.
category: Display
related: [Text, Container]
commonPatterns: [upload-progress, loading-progress, completion-progress]
---

Source: https://clickhouse.design/click-ui/progressbar

# Progress bar

Progress Bar provides visual feedback on the completion status of a task. It supports both default and small variants, with optional dismiss functionality and success messages.

## Example

## Props

| Prop           | Type                         | Default value  | Description                                                         |
| -------------- | ---------------------------- | -------------- | ------------------------------------------------------------------- |
| progress       | `number`                     | `0`            | Progress value from 0 to 100 representing the completion percentage |
| type           | `"default" \| "small"`       | `"default"`    | Size variant of the progress bar                                    |
| label          | `ReactNode`                  | `undefined`    | Label text or content displayed above or beside the progress bar    |
| error          | `ReactNode`                  | `undefined`    | Error message or content to display when progress fails             |
| successMessage | `ReactNode`                  | `undefined`    | Success message displayed when progress reaches 100%                |
| dismissable    | `boolean`                    | `false`        | Whether the progress bar can be dismissed with a close button       |
| onCancel       | `() => void`                 | `undefined`    | Callback function called when the dismiss button is clicked         |
| orientation    | `"horizontal" \| "vertical"` | `"horizontal"` | Layout orientation - whether progress bar is horizontal or vertical |
| dir            | `"start" \| "end"`           | `"start"`      | Direction of progress fill - start (left/top) or end (right/bottom) |

```tsx
import { ProgressBar } from '@clickhouse/click-ui'

<ProgressBar 
progress={75}
label="Processing..."
successMessage="Complete!"
/>
```

## Quick start

```tsx
import { ProgressBar } from '@clickhouse/click-ui'

function MyProgressBar() {
return (
  <ProgressBar 
    progress={75}
    label="Processing..."
    successMessage="Complete!"
  />
)
}
```

## Related components

- **Text**: Often used with progress bars for labels and messages.
- **Container**: For organizing progress bars within layouts.

## Common use cases

### Upload progress

```tsx
import { ProgressBar } from '@clickhouse/click-ui'

function UploadProgress() {
return (
  <ProgressBar 
    progress={75}
    label="Uploading files..."
  />
)
}
```

### Loading progress

```tsx
import { ProgressBar } from '@clickhouse/click-ui'

function LoadingProgress() {
return (
  <ProgressBar 
    progress={60}
    label="Processing..."
  />
)
}
```

### Completion progress

```tsx
import { ProgressBar } from '@clickhouse/click-ui'

function CompletionProgress() {
return (
  <ProgressBar 
    progress={100}
    label="Complete!"
    successMessage="Upload complete!"
  />
)
}
```

### Small progress bar

```tsx
import { ProgressBar } from '@clickhouse/click-ui'

function SmallProgressBar() {
return (
  <ProgressBar 
    progress={60}
    type="small"
  />
)
}
```