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

Loading Component

CSS-only Tailwind CSS loading indicator with spinner, dots, ring, and bars animations. Color and size variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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