Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Đang tải thành phần

Cập nhật lần cuối:

Chỉ báo tải CSS Tailwind chỉ dành cho CSS với các hoạt ảnh xoay tròn, dấu chấm, vòng và thanh. Các biến thể về màu sắc và kích thước, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

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

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Đang tải chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP