---
title: "Loading"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Loading with spinner, dots, bars, and ring variants. Multiple sizes and colors for accessible async feedback indicators."
url: https://frutjam.com/zh-hant/components/loading
---

# Loading Component

載入元件在取得或處理內容時顯示視覺指示器，讓使用者了解情況並防止感知延遲。載入旋轉器採用語義 HTML 和流暢的 CSS 動畫構建，可傳達活動的背景操作。 Frutjam 載入系統支援多種樣式、顏色和尺寸，非常適合資料表、檔案上傳、表單提交和非同步操作。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                | 類型 | 描述              |
| ----------------- | --- | --------------- |
| loading           | 根據 | 旋轉環指示器，預設繼承文字顏色 |
| loading-dots      | 風格 | 三個脈衝點           |
| loading-bars      | 風格 | 三個動畫垂直條         |
| loading-xs        | 尺寸 | 特小號（1rem）       |
| loading-sm        | 尺寸 | 小 (1.25rem)     |
| loading-md        | 尺寸 | 中（1.5rem，預設）    |
| loading-lg        | 尺寸 | 大 (2rem)        |
| loading-xl        | 尺寸 | 超大 (2.5rem)     |
| loading-base      | 顏色 | 柔和的基面顏色         |
| loading-current   | 顏色 | 明確繼承目前文字顏色      |
| loading-primary   | 顏色 | 主要主題顏色          |
| loading-secondary | 顏色 | 次要主題色           |
| loading-accent    | 顏色 | 強調主題顏色          |
| loading-neutral   | 顏色 | 中性主題色           |
| loading-info      | 顏色 | 訊息語意顏色          |
| loading-success   | 顏色 | 成功語意色           |
| loading-warning   | 顏色 | 警告語意顏色          |
| loading-error     | 顏色 | 錯誤語意顏色          |

## 基本用法

## 載入樣式

```html
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>
```

## 裝載尺寸

```html
<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>
```

## 載入顏色

```html
<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>
```

## 載入目前顏色

```html
<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>
```

## 載入按鈕

```html
<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>
```

## 載入狀態

```html
<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>
```