Overview
The Progress component is used to visually indicate the progress of a task or operation. It can be used in various scenarios, such as file uploads, downloads, or any process that takes time to complete. The component provides feedback to users about the current state of the operation.
Variants
The Progress component supports different variants to customize its appearance. You can choose from the following variants:
- Linear: A simple progress bar that shows the current progress.
- Wavy: A progress bar with a wavy animation to indicate ongoing progress.
API Reference
Progress
A visual progress indicator component for showing the completion status of tasks.
Props
| Name | Type | Default | Description |
|---|---|---|---|
percent | number | Required | The completion percentage (0-100) |
variant | "linear" | "wavy" | "linear" | The visual style of the progress indicator |
Inherited Props
The Progress component accepts all standard HTML div element props.
Notes
- The
percentprop accepts values from 0 to 100 - The wavy variant includes smooth animation effects
- The component automatically handles responsive sizing
- Progress is displayed as an SVG element for crisp rendering at all sizes