---
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/vi/components/loading
---

# Loading Component

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ả                                           |
| ----------------- | ---------- | ---------------------------------------------------- |
| loading           | Căn cứ     | Chỉ báo vòng quay, kế thừa màu văn bản theo mặc định |
| loading-dots      | Phong cách | Ba chấm xung                                         |
| loading-bars      | Phong cách | Ba thanh dọc hoạt hình                               |
| loading-xs        | Kích cỡ    | Cực nhỏ (1rem)                                       |
| loading-sm        | Kích cỡ    | Nhỏ (1,25rem)                                        |
| loading-md        | Kích cỡ    | Trung bình (1,5rem, mặc định)                        |
| loading-lg        | Kích cỡ    | Lớn (2rem)                                           |
| loading-xl        | Kích cỡ    | Cực lớn (2,5rem)                                     |
| loading-base      | Màu sắc    | Màu bề mặt cơ bản bị tắt                             |
| loading-current   | Màu sắc    | Kế thừa rõ ràng màu văn bản hiện tại                 |
| loading-primary   | Màu sắc    | Màu chủ đề chính                                     |
| loading-secondary | Màu sắc    | Màu chủ đề phụ                                       |
| loading-accent    | Màu sắc    | Màu chủ đề nhấn mạnh                                 |
| loading-neutral   | Màu sắc    | Màu chủ đề trung tính                                |
| loading-info      | Màu sắc    | Màu sắc ngữ nghĩa thông tin                          |
| loading-success   | Màu sắc    | Màu ngữ nghĩa thành công                             |
| loading-warning   | Màu sắc    | Màu ngữ nghĩa cảnh báo                               |
| loading-error     | Màu sắc    | Lỗi ngữ nghĩa màu sắc                                |

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

## Đang tải kiểu

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

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

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

## Đang tải màu

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

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

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

## Đang tải trong nút

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

## Đang tải trạng thái

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