ComponentsCore
Loader
A sleek, lightweight loading indicator designed to elevate user experience by clearly signaling ongoing background activity with smooth, modern animations.
Example
Usage
Features
The <progress> HTML element can be used to build a progress bar, however it is very difficult to style cross browser. ProgressBar 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. 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
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 loaderAnatomy
import { Loader } from "@/components/ui/core/loader";<Loader tone="ring" />
<Loader tone="spin" />
<Loader tone="bars" />Props
Loading types…