Trình Tạo CSS Loader — Animation Tải Không Cần Ảnh

Chỉ báo tải là thiết yếu cho UX tốt khi thực hiện các thao tác bất đồng bộ. Trình tạo của chúng tôi tạo spinner CSS và animation tải không cần ảnh hay JavaScript — hoàn toàn bằng CSS.

Các Kiểu Loader Thường Dùng

Spinner tròn (border + border-radius + animation rotate). Ba chấm nảy (opacity + translateY animation với delay so le). Hình tròn nhấp nháy (scale + opacity). Skeleton loading (animation shimmer trên hình chữ nhật xám). Chọn kiểu phù hợp với UI của bạn.

Hiệu Suất Animation CSS

Chỉ animate transform và opacity để compositing GPU. Animation CSS hiệu quả hơn animation JavaScript vì chạy trên thread riêng. Dùng will-change: transform tiết kiệm — nó dự trữ bộ nhớ GPU.

Khi Nào Hiển Thị Loader

Hiển thị loader cho các thao tác kéo dài hơn 300ms. Dưới 100ms: không cần chỉ báo. 100–300ms: phản hồi tinh tế. Trên 300ms: spinner. Trên 1 giây: thêm chỉ báo tiến trình nếu có thể để trấn an người dùng.