Loading
A versatile loading component with multiple animation styles and customizable appearance for indicating loading states.
Overview
The Loading component provides a consistent way to display loading states throughout your application. It's designed to give users clear feedback when content is being loaded or processed, with multiple animation styles and customizable options.
Usage
Examples
Basic Loading
Default loading spinner with standard animation.
Custom Size and Duration
Loading components with different sizes and animation durations.
Dots Line Animation
Alternative loading animation using dots in a line pattern.
Features
- Multiple Variants: Different animation styles (spinner, dots)
- Size Options: Multiple sizes for different contexts
- Customizable Duration: Configurable animation speed
- Accessibility: Built-in accessibility support with proper ARIA attributes
- Responsive Design: Adapts to different screen sizes
- Dark Mode Support: Consistent appearance in light and dark themes
- Customizable Styling: Extensive styling options through className prop
Props
Prop | Type | Default | Description |
---|---|---|---|
variant | "spinner" | "dots" | "spinner" | The animation style of the loading component |
size | "sm" | "md" | "lg" | "md" | The size of the loading component |
duration | number | 1000 | Animation duration in milliseconds |
className | string | undefined | Additional CSS classes to apply |
Variants
Spinner
- Circular spinning animation
- Default variant for most use cases
- Smooth, continuous rotation
- Ideal for general loading states
Dots
- Animated dots in a line pattern
- Alternative visual style
- Sequential animation
- Good for text-based loading contexts
Structure
The Loading component is a simple, self-contained component that renders as a single div element with appropriate styling and accessibility attributes.
Styling
The Loading component includes default styling with:
- Consistent sizing across variants
- Smooth CSS animations
- Dark mode support
- Responsive design
- Focus states for accessibility
- Customizable through className prop
Custom Styling
You can customize the appearance using the className prop:
Accessibility
The Loading component is built with accessibility in mind:
- ARIA Attributes: Proper ARIA labels for screen readers
- Live Regions: Announces loading state changes
- Focus Management: Maintains focus context during loading
- High Contrast: Maintains proper contrast ratios
- Semantic HTML: Uses appropriate HTML elements and roles
- Screen Reader Support: Announces loading status appropriately