加载组件
纯 CSS Tailwind CSS 加载指示器，带有旋转器、点、环和条形动画。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
Loading components display visual indicators while content is being fetched or processed, keeping users informed and preventing perceived delays. Built with semantic HTML and smooth CSS animations, loading spinners communicate active background operations. The Frutjam loading system supports multiple styles, colors, and sizes—ideal for data tables, file uploads, form submissions, and asynchronous operations.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | Type | Description |
|---|---|---|
| loading | Base | Spinning ring indicator, inherits text color by default |
| loading-dots | Style | Three pulsing dots |
| loading-bars | Style | Three animated vertical bars |
| loading-xs | Size | Extra small (1rem) |
| loading-sm | Size | Small (1.25rem) |
| loading-md | Size | Medium (1.5rem, default) |
| loading-lg | Size | Large (2rem) |
| loading-xl | Size | Extra large (2.5rem) |
| loading-base | Color | Muted base surface color |
| loading-current | Color | Explicitly inherits the current text color |
| loading-primary | Color | Primary theme color |
| loading-secondary | Color | Secondary theme color |
| loading-accent | Color | Accent theme color |
| loading-neutral | Color | Neutral theme color |
| loading-info | Color | Info semantic color |
| loading-success | Color | Success semantic color |
| loading-warning | Color | Warning semantic color |
| loading-error | Color | Error semantic color |
Basic Usage
<span class="loading"></span> |
<span className="loading"></span> |
<span class="loading"></span> |
Loading Styles
html
1 2 3 | <span class="loading"></span> <span class="loading loading-dots"></span> <span class="loading loading-bars"></span> |
Loading Sizes
html
1 2 3 4 5 | <span class="loading loading-xs"></span> <span class="loading loading-sm"></span> <span class="loading loading-md"></span> <span class="loading loading-lg"></span> <span class="loading loading-xl"></span> |
Loading Colors
html
1 2 3 4 5 6 7 8 9 | <span class="loading loading-base"></span> <span class="loading loading-primary"></span> <span class="loading loading-secondary"></span> <span class="loading loading-accent"></span> <span class="loading loading-info"></span> <span class="loading loading-success"></span> <span class="loading loading-warning"></span> <span class="loading loading-error"></span> <span class="loading loading-neutral"></span> |
Loading Current Color
Inherits primary text color
Inherits error text color
html
1 2 3 4 5 6 7 8 | <p class="text-primary flex items-center gap-2"> <span class="loading loading-sm"></span> Inherits primary text color </p> <p class="text-error flex items-center gap-2"> <span class="loading loading-sm"></span> Inherits error text color </p> |
Loading in Button
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <button class="btn gap-2"> <span class="loading loading-sm"></span> Loading </button> <button class="btn btn-primary gap-2"> <span class="loading loading-sm loading-current"></span> Processing </button> <button class="btn btn-error gap-2"> <span class="loading loading-sm loading-current"></span> Deleting </button> |
Loading States
Loading Data
Fetching information...
html
1 2 3 4 5 6 7 8 9 | <div class="card card-outline w-96"> <div class="card-content"> <h3 class="card-title">Loading Data</h3> <div class="flex items-center gap-2"> <span class="loading loading-md"></span> <span>Fetching information...</span> </div> </div> </div> |