Loading
Basic Loading States
Simple loading spinners in different sizes and colors.
Small Loading
size="sm"
Medium Loading (Default)
Default size
Large Loading
size="lg"
Custom Styled Loading
Loading spinners with custom colors and styling.
Primary
Success
Warning
Danger
Loading with Text
Loading indicators combined with descriptive text.
Please wait while we process your request
Uploading files
This may take a few moments
Synchronizing data
Connecting to server and updating records
Button Loading States
Interactive buttons with loading states and actions.
Progress Loading
Loading indicators with progress tracking.
File Upload Progress
Contextual Loading
Loading states in different contexts and layouts.
Table Loading
| Name | Status |
|---|---|
Loading... | |
Card Content Loading
Form Submission
Dashboard Widget
Loading chart data
Full Page Loading
Loading overlays and full-screen loading states.
Overlay Loading
This simulates a loading overlay that appears over content while processing.
Modal Loading
Loading state within modal dialogs and popups.
Loading modal content
Fetching data from server
Custom Loading Patterns
Creative loading patterns and animations.
Pulsing Dots
Rotating Icon
Gradient Spinner
Loading Best Practices
Guidelines for effective loading state implementation.
✅ Do
- • Show loading immediately when action starts
- • Provide clear, descriptive loading messages
- • Use appropriate loading size for context
- • Disable interactive elements during loading
- • Show progress for long-running operations
- • Use skeleton screens for content loading
❌ Don't
- • Use loading for very fast operations (<200ms)
- • Block entire interface unnecessarily
- • Use generic "Loading..." for everything
- • Forget to handle loading errors
- • Make loading animations too distracting
- • Leave users without feedback on progress
Loading State Summary
Current status of all interactive loading examples.
General Loading
Idle
Search
Ready
Save Action
Ready
Upload Progress
Ready
| Name | Type | Default | Details |
|---|---|---|---|
| className | string | ' ' | You can customise by passing tailwind classes. |
| aria-label | string | Optional | ARIA label for accessibility. |