Chuyển đến nội dung chính
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.

Các thành phần tải sẽ hiển thị các chỉ báo trực quan trong khi nội dung đang được tìm nạp hoặc xử lý, giúp người dùng luôn được thông báo và ngăn chặn sự chậm trễ có thể nhận thấy. Được xây dựng bằng HTML ngữ nghĩa và hoạt ảnh CSS mượt mà, các vòng quay tải giao tiếp với các hoạt động nền đang hoạt động. Hệ thống tải Frutjam hỗ trợ nhiều kiểu, màu sắc và kích thước — lý tưởng cho các bảng dữ liệu, tải tệp lên, gửi biểu mẫu và hoạt động không đồng bộ.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
loadingCăn cứChỉ báo vòng quay, kế thừa màu văn bản theo mặc định
loading-dotsPhong cáchBa chấm xung
loading-barsPhong cáchBa thanh dọc hoạt hình
loading-xsKích cỡCực nhỏ (1rem)
loading-smKích cỡNhỏ (1,25rem)
loading-mdKích cỡTrung bình (1,5rem, mặc định)
loading-lgKích cỡLớn (2rem)
loading-xlKích cỡCực lớn (2,5rem)
loading-baseMàu sắcMàu bề mặt cơ bản bị tắt
loading-currentMàu sắcKế thừa rõ ràng màu văn bản hiện tại
loading-primaryMàu sắcMàu chủ đề chính
loading-secondaryMàu sắcMàu chủ đề phụ
loading-accentMàu sắcMàu chủ đề nhấn mạnh
loading-neutralMàu sắcMàu chủ đề trung tính
loading-infoMàu sắcMàu sắc ngữ nghĩa thông tin
loading-successMàu sắcMàu ngữ nghĩa thành công
loading-warningMàu sắcMàu ngữ nghĩa cảnh báo
loading-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

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

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

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

Đang tải kiểu

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

Đang tải kích thước

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>

Đang tải màu

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>

Đang tải màu hiện tại

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>

Đang tải trong nút

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>

Đang tải trạng thái

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>