Oihana Next UI - 0.1.11

Application logo

Loading Component

Loading Examples

All Animations

spinner
dots
ring
ball
bars
infinity
<Loading animation="spinner" />
<Loading animation="dots" />
<Loading animation="ring" />
<Loading animation="ball" />
<Loading animation="bars" />
<Loading animation="infinity" />

All Sizes

spinner

xs
sm
md
lg
xl

dots

xs
sm
md
lg
xl

ring

xs
sm
md
lg
xl

ball

xs
sm
md
lg
xl

bars

xs
sm
md
lg
xl

infinity

xs
sm
md
lg
xl
<Loading animation="spinner" size="xs" />
<Loading animation="spinner" size="sm" />
<Loading animation="spinner" size="md" />
<Loading animation="spinner" size="lg" />
<Loading animation="spinner" size="xl" />

All Colors

spinner

primary
secondary
accent
neutral
info
success
warning
error

dots

primary
secondary
accent
neutral
info
success
warning
error

ring

primary
secondary
accent
neutral
info
success
warning
error

ball

primary
secondary
accent
neutral
info
success
warning
error

bars

primary
secondary
accent
neutral
info
success
warning
error

infinity

primary
secondary
accent
neutral
info
success
warning
error
<Loading animation="spinner" color="primary" />
<Loading animation="spinner" color="secondary" />
<Loading animation="spinner" color="success" />
<Loading animation="spinner" color="error" />

Combinations

xs + primary
sm + secondary
md + accent
lg + info
xl + success
lg + warning
<Loading animation="spinner" size="xs" color="primary" />
<Loading animation="dots" size="lg" color="success" />

Real-World Use Cases

1. In Buttons

<button className="btn btn-primary">
    <Loading animation="spinner" size="sm" color="primary-content" />
    Loading...
</button>

2. Centered in Card

Loading content...

Please wait a moment

<div className="card-body">
    <div className="flex flex-col items-center gap-4">
        <Loading animation="spinner" size="xl" color="primary" />
        <p>Loading content...</p>
    </div>
</div>

3. Inline with Text

Fetching data from server...
Upload in progress...
Processing payment...
<div className="flex items-center gap-2">
    <Loading animation="spinner" size="sm" color="info" />
    <span>Fetching data...</span>
</div>

4. Full Page Overlay

Loading application...

This won't take long

Page Content

Lorem ipsum dolor sit amet...

<div className="relative">
    <div className="absolute inset-0 bg-base-100/90 backdrop-blur-sm">
        <Loading animation="infinity" size="xl" color="primary" />
        <p>Loading application...</p>
    </div>
</div>

5. In Alerts

Syncing your data...
Processing your request...
Upload in progress...
<div className="alert alert-info">
    <Loading animation="spinner" color="info-content" size="sm" />
    <span>Syncing your data...</span>
</div>

6. Table Loading

NameStatusActions
Loading data...
<tbody>
    <tr>
        <td colSpan="3" className="text-center">
            <Loading animation="bars" size="lg" color="primary" />
            <span>Loading data...</span>
        </td>
    </tr>
</tbody>

7. With Badge

ProcessingSyncingUploading
<Badge color="primary" className="gap-2">
    <Loading animation="spinner" size="xs" color="primary-content" />
    <span>Processing</span>
</Badge>

Props Reference

PropTypeDefaultDescription
animationstring'spinner'Animation type: spinner, dots, ring, ball, bars, infinity
sizestring'md'Size: xs, sm, md, lg, xl
colorstring'base-content'Any TextColor (primary, success, error, etc.)
classNamestring-Additional CSS classes

Best Practices

✅ Do

  • Use appropriate sizes for context
  • Match colors to theme (e.g., primary-content in buttons)
  • Add descriptive text for clarity
  • Use backdrop blur for overlays

❌ Don't

  • Use XL size in small buttons
  • Forget aria-label for accessibility
  • Use conflicting colors (e.g., primary on primary bg)
  • Show multiple loaders for same action