# 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: ```javascript // 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 `` với các tiện ích `after:` của Tailwind: ```html Loading ``` ✅ Kết quả: ``` Loading. Loading.. Loading... Loading Loading. ``` --- ### Bước 3: Biến Thể * Làm cho nó chậm hơn: ```javascript 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ẽ: ```javascript // 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 ```html

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

Bài viết về chủ đề#scc

Tổng hợp các bài viết về #scc

Tạo Hiệu Ứng “Loading Dots” Trong Tailwind CSS#webdev#javascript#tailwindcss#scc

Chủ đề phổ biến

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