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
25%
50%
75%
Upload complete!
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop progress | Type number | Default value 0 | Description Progress value from 0 to 100 representing the completion percentage |
Prop type | Type "default" | "small" | Default value "default" | Description Size variant of the progress bar |
Prop label | Type ReactNode | Default value undefined | Description Label text or content displayed above or beside the progress bar |
Prop error | Type ReactNode | Default value undefined | Description Error message or content to display when progress fails |
Prop successMessage | Type ReactNode | Default value undefined | Description Success message displayed when progress reaches 100% |
Prop dismissable | Type boolean | Default value false | Description Whether the progress bar can be dismissed with a close button |
Prop onCancel | Type () => void | Default value undefined | Description Callback function called when the dismiss button is clicked |
Prop orientation | Type "horizontal" | "vertical" | Default value "horizontal" | Description Layout orientation - whether progress bar is horizontal or vertical |
Prop dir | Type "start" | "end" | Default value "start" | Description Direction of progress fill - start (left/top) or end (right/bottom) |
Quick Start
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
25%
50%
75%
import { ProgressBar } from '@clickhouse/click-ui'
function UploadProgress() {
return (
<ProgressBar
progress={75}
label="Uploading files..."
/>
)
}Loading Progress
30%
60%
90%
import { ProgressBar } from '@clickhouse/click-ui'
function LoadingProgress() {
return (
<ProgressBar
progress={60}
label="Processing..."
/>
)
}Completion Progress
Upload complete!
import { ProgressBar } from '@clickhouse/click-ui'
function CompletionProgress() {
return (
<ProgressBar
progress={100}
label="Complete!"
successMessage="Upload complete!"
/>
)
}Small Progress Bar
import { ProgressBar } from '@clickhouse/click-ui'
function SmallProgressBar() {
return (
<ProgressBar
progress={60}
type="small"
/>
)
}