69 lines
1.4 KiB
Plaintext
69 lines
1.4 KiB
Plaintext
---
|
|
title: Progress
|
|
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="base-progress-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="base-progress" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<Progress value={50}>
|
|
<ProgressLabel />
|
|
<ProgressValue />
|
|
<ProgressTrack />
|
|
</Progress>
|
|
```
|
|
|
|
## Props
|
|
|
|
<div className="flex flex-row gap-x-3">
|
|
<ExternalLink
|
|
href="https://base-ui.com/react/components/progress"
|
|
text="Docs"
|
|
/>
|
|
<ExternalLink
|
|
href="https://base-ui.com/react/components/progress#api-reference"
|
|
text="API Reference"
|
|
/>
|
|
</div>
|
|
|
|
### Animate UI Props
|
|
|
|
#### ProgressTrack
|
|
|
|
<TypeTable
|
|
type={{
|
|
transition: {
|
|
description: 'The transition to use for the progress track.',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: "{ type: 'spring', stiffness: 100, damping: 30 }",
|
|
},
|
|
}}
|
|
/>
|
|
|
|
#### ProgressLabel
|
|
|
|
<TypeTable
|
|
type={{
|
|
countingNumberProps: {
|
|
description: 'The props to pass to the counting number.',
|
|
type: 'CountingNumberProps',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- We use [Base UI](https://base-ui.com/react/components/progress) for the progress component.
|
|
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/progress) for the progress style.
|