Tạo Hiệu Ứng “Loading Dots” Trong Tailwind CSS

Khi bạn muốn hiển thị trạng thái đang tải, một vòng xoay đơn giản thường được sử dụng, nhưng đôi khi nó cảm thấy quá chung chung. Các điểm chấm hoạt hình là một lựa chọn sạch sẽ và thân thiện hơn mà người dùng thường thấy trong các ứng dụng trò chuyện, bảng điều khiển và thanh trạng thái.

Trong hướng dẫn này, chúng ta sẽ xây dựng hai loại hiệu ứng loading dots trong Tailwind CSS:

1. Điểm chấm nối tiếp (Loading. → Loading.. → Loading...)
2. Điểm chấm nhảy (ba điểm nhảy lần lượt, giống như chỉ báo đang gõ)

1. Hiệu Ứng Điểm Chấm Nối Tiếp

Bước 1: Mở Rộng Cấu Hình Tailwind

Trong file tailwind.config.js, thêm một hoạt ảnh keyframe mới cho vòng lặp điểm:

// tailwind.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        dotLoop: {
          '0%':   { content: '"."' },
          '25%':  { content: '".."'},
          '50%':  { content: '"..."'},
          '75%':  { content: '""' },
          '100%': { content: '"."' },
        },
      },
      animation: {
        dotLoop: 'dotLoop 1.5s steps(1,end) infinite',
      },
    },
  },
};

👉 Tại đây, chúng ta đang hoạt hình thuộc tính content. Sử dụng steps(1,end) đảm bảo rằng các điểm chấm nhảy ngay lập tức thay vì mờ dần.

Bước 2: Thêm Vào HTML

Bây giờ chỉ cần sử dụng một <span> với các tiện ích after: của Tailwind:

<span class="text-blue-600 font-medium">
  Loading<span class="after:animate-dotLoop"></span>
</span>

✅ Kết quả:

Loading.
Loading..
Loading...
Loading
Loading.

Bước 3: Biến Thể

• Làm cho nó chậm hơn:

  dotLoop: 'dotLoop 2s steps(1,end) infinite'

• Thay đổi màu sắc: bao quanh với text-green-600 hoặc text-red-500.
• Tái sử dụng trong nút bấm, hộp thoại, hoặc chân bảng.

2. Hiệu Ứng Điểm Chấm Nhảy

Hiệu ứng này giống như “chỉ báo đang gõ” trong trò chuyện.

Bước 1: Cấu Hình Tailwind

Thêm ba hoạt ảnh nhảy xen kẽ:

// tailwind.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        bounceDot: {
          '0%, 80%, 100%': { transform: 'scale(0)' },
          '40%': { transform: 'scale(1)' },
        },
      },
      animation: {
        bounceDot1: 'bounceDot 1.4s infinite ease-in-out',
        bounceDot2: 'bounceDot 1.4s infinite ease-in-out 0.2s',
        bounceDot3: 'bounceDot 1.4s infinite ease-in-out 0.4s',
      },
    },
  },
};

Bước 2: HTML Cho Hiệu Ứng Loading

<div class="flex space-x-1">
  <span class="w-2 h-2 bg-gray-600 rounded-full animate-bounceDot1"></span>
  <span class="w-2 h-2 bg-gray-600 rounded-full animate-bounceDot2"></span>
  <span class="w-2 h-2 bg-gray-600 rounded-full animate-bounceDot3"></span>
</div>

✅ Kết quả:
Ba điểm chấm nhỏ nhảy lần lượt trong vòng lặp. Hoàn hảo cho trạng thái “đang gõ...” trong trò chuyện.

3. Khi Nào Sử Dụng Cái Nào

• Điểm Chấm Nối Tiếp → Tuyệt vời cho các loader văn bản inline (Loading..., Đang lấy dữ liệu...).
• Điểm Chấm Nhảy → Tốt hơn cho các chỉ báo hình ảnh như trò chuyện, nút bấm, hoặc màn hình chờ.

🎉 Suy Nghĩ Cuối Cùng

Chỉ với vài dòng trong tailwind.config.js và HTML tối thiểu, bạn có thể tạo ra các hoạt ảnh loading mượt mà, có thể tái sử dụng, và hiện đại trong Tailwind CSS.

Hãy thử kết hợp cả hai cách tùy thuộc vào nhu cầu UI của bạn!

Các Thực Hành Tốt Nhất

• Sử dụng màu sắc phù hợp với thương hiệu của bạn để giữ sự nhất quán.
• Điều chỉnh tốc độ nhảy để không gây khó chịu cho người dùng.

Những Cạm Bẫy Thường Gặp

• Không nên sử dụng quá nhiều hiệu ứng loading, điều này có thể làm người dùng cảm thấy khó chịu.

Mẹo Tối Ưu Hiệu Suất

• Giảm thiểu số lượng DOM nodes nếu có thể, điều này sẽ giúp tăng tốc độ render.

Giải Quyết Sự Cố

• Nếu hiệu ứng không hoạt động, hãy kiểm tra xem bạn đã thêm đúng cấu hình vào tailwind.config.js hay chưa.

FAQ

1. Tôi có thể sử dụng hiệu ứng loading này trong ứng dụng nào?
Có, bạn có thể sử dụng chúng trong bất kỳ ứng dụng nào có trạng thái tải dữ liệu.

2. Có cách nào để tùy chỉnh hiệu ứng không?
Có, bạn có thể điều chỉnh tốc độ, màu sắc và kích thước của hiệu ứng để phù hợp với thiết kế của bạn.

Hãy bắt đầu ngay để cải thiện trải nghiệm người dùng của bạn với các hiệu ứng loading đẹp mắt!