跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme

載入元件

最後更新:

純 CSS Tailwind CSS 載入指示器，帶有旋轉器、點、環和條形動畫。顏色和尺寸變體，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

載入元件在取得或處理內容時顯示視覺指示器，讓使用者了解情況並防止感知延遲。載入旋轉器採用語義 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顏色錯誤語意顏色

基本用法

<span class="loading"></span>

<span className="loading"></span>

<span class="loading"></span>

載入樣式

html 
1
2
3
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>

裝載尺寸

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>

載入顏色

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>

載入目前顏色

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>

載入按鈕

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

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 載入中 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP