A loader is a visual indicator that a task is in progress.
Preview
Loader vs Skeleton
Use Loader when:
- You need a simple, generic loading indicator
- Loading time is short or indeterminate
- You want to indicate that a process is running without showing layout structure
- You need a compact loading indicator for buttons, small components, or overlays
Use Skeleton when:
- Content is expected to take more than a few hundred milliseconds to load on average
- You want to show the approximate layout and structure of content being loaded
- Loading complex lists, cards, or detailed content where users benefit from seeing the expected layout
- You need to maintain visual hierarchy during loading states
Variants
Default
The base loader should be the go-to loader for most of your needs. When in doubt, use this style.
Sizes
The base loader size is 24px and should be used in most cases.
Vue API
Props
Accessibility
- You can add an
aria-labelattribute to the loader to indicate a custom label. - If no
aria-labelis provided, the default value is "loading".