ComponentsCore
Progress
Progress show either determinate or indeterminate progress of an operation over time.
Example
Usage
Features
The <progress> HTML element can be used to build a progress bar, however it is very difficult to style cross browser. Progress helps achieve accessible progress bars and spinners that can be styled as needed.
- Accessible – Follows the ARIA progressbar pattern, supporting both determinate and indeterminate progress bars and spinners. A nested label is automatically associated with the progress bar semantically.
- International – The value is formatted as a percentage or custom format according to the user's locale.
Installation
Required Component
This component depends on Field. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add progressAnatomy
import { ProgressBar } from "@/components/ui/core/progress";<ProgressBar label="Memory usage" value={80} />Another Examples
Custom Label Value
Displays a progress bar with a custom label for the value.
Usage
Decimal
Shows a progress bar with a decimal-based value representation.
Usage
Props
Loading types…