CSS Loader Generator - Tạo Spinner, Hiệu Ứng Loading Bằng CSS Thuần

Tính năng nổi bật

• 13 mẫu loader: vòng tròn, vòng kép, cung mờ dần, chấm quay quanh vòng, đồng hồ, ba chấm nhảy, ba chấm sáng lần lượt, ba cột nhấp nhô, nhịp lan tỏa, gợn sóng, ô vuông lật, thanh tiến trình không xác định, skeleton ánh sáng lướt
• Mỗi loader chỉ dùng một thẻ span và hai giả phần tử ::before, ::after, không cần thêm div con hay JavaScript
• Chỉnh màu (bảng màu hoặc mã HEX), kích thước 12 đến 160px, độ dày nét, thời gian một vòng từ 0,3 đến 4 giây
• Các thông số được xuất thành biến CSS như --loader-color, --loader-size để đổi nhanh về sau mà không phải sửa từng dòng
• Mã HTML có role="status" và văn bản ẩn cho trình đọc màn hình, có thể đổi câu Đang tải... theo ngữ cảnh
• Chọn cách xử lý khi người dùng bật giảm chuyển động: chạy chậm lại 3 lần hoặc dừng hẳn
• Đặt tên class tùy ý, công cụ kiểm tra tên hợp lệ trong CSS; tên keyframes sinh theo tên class nên không đụng nhau
• Xem trước toàn bộ mẫu trên nền tối hoặc nền sáng, sao chép HTML và CSS bằng hai nút riêng

Vì sao nên dùng loader bằng CSS thuần

Ảnh GIF xoay tròn bị răng cưa trên màn hình độ phân giải cao, khó đổi màu theo thương hiệu và tốn thêm một lượt tải. Thư viện giao diện thì kéo theo nhiều mã không dùng tới chỉ để có một vòng quay. Loader viết bằng CSS thuần nhẹ, sắc nét ở mọi kích thước, đổi màu bằng một biến và chạy ngay cả khi JavaScript chưa tải xong. Vì phần lớn mẫu trong công cụ chỉ chuyển động bằng transform, opacity hoặc vị trí nền, trình duyệt xử lý chúng nhẹ nhàng. Điều khó hơn là làm cho đúng về truy cập: người dùng trình đọc màn hình cần được báo là trang đang tải, người bị chóng mặt cần chuyển động dịu lại. Công cụ làm sẵn hai việc này để bạn không phải nhớ.

Lợi ích khi sử dụng

• •Không thêm thư viện hay ảnh, mỗi mẫu chỉ khoảng 0,5 đến 1 KB CSS trước khi nén
• •Sắc nét ở mọi kích thước, đổi màu bằng một biến CSS
• •Người dùng trình đọc màn hình biết trang đang tải
• •Tôn trọng tùy chọn giảm chuyển động của hệ điều hành
• •Markup tối giản, dễ gắn vào React, Vue hay HTML thuần
• •Chạy hoàn toàn trên trình duyệt, không cần đăng ký

Cách tạo loader CSS

1. 1Chọn mẫu: Bấm vào một ô trong lưới mẫu, dùng nút Nền sáng hoặc Nền tối để xem loader trên nền giống trang của bạn.
2. 2Chỉnh thông số: Chọn màu, kéo thanh kích thước, độ dày nét và thời gian một vòng. Mẫu không dùng độ dày nét sẽ khóa thanh trượt tương ứng.
3. 3Chọn chế độ giảm chuyển động: Để mặc định chạy chậm lại nếu muốn người dùng vẫn thấy trang đang làm việc, hoặc chọn dừng hẳn.
4. 4Đặt tên và câu thông báo: Đổi tên class nếu trùng với mã sẵn có và sửa câu Đang tải... cho sát ngữ cảnh, ví dụ Đang gửi đơn hàng.
5. 5Sao chép mã: Bấm Sao chép HTML, dán vào chỗ cần hiện loader; bấm Sao chép CSS và dán vào file CSS chung.

Một thẻ HTML, hai giả phần tử: cách các mẫu được dựng

Mẫu vòng tròn chỉ là một hình tròn có viền nhạt, riêng cạnh trên đậm màu, rồi được xoay 360 độ liên tục. Mẫu cung mờ dần dùng conic-gradient để tô màu nhạt dần quanh tâm, rồi dùng mask hình vành khuyên khoét rỗng phần giữa. Mẫu ba chấm nhảy không có ba thẻ con mà là ba lớp radial-gradient trên cùng một nền, keyframes thay đổi background-position của từng lớp để các chấm lên xuống lệch pha. Mẫu ba cột làm tương tự bằng linear-gradient và background-size. Những mẫu cần thêm hình như chấm quay quanh vòng, đồng hồ, gợn sóng thì dùng ::before và ::after. Nhờ vậy HTML luôn chỉ là một thẻ span, dễ chèn vào bất kỳ đâu.

Làm loader dễ tiếp cận với trình đọc màn hình

Một vòng quay chỉ là hình ảnh, trình đọc màn hình không biết nó có nghĩa gì. Mã công cụ xuất ra gắn role="status" cho loader, đây là một vùng thông báo trực tiếp mức lịch sự, và đặt bên trong một câu như Đang tải... được ẩn khỏi mắt bằng lớp visually-hidden nhưng vẫn được đọc. Lưu ý thực tế: một số trình đọc màn hình chỉ thông báo khi nội dung bên trong vùng status thay đổi, không thông báo khi cả vùng vừa được chèn vào trang. Cách chắc chắn nhất là để sẵn thẻ loader trong trang và chỉ chèn câu thông báo vào khi bắt đầu tải. Với khung skeleton thay cho một khu vực nội dung, bạn có thể đặt thêm aria-busy="true" lên khu vực đó trong lúc tải và gỡ ra khi xong.

Chạy chậm hay dừng hẳn khi người dùng bật giảm chuyển động

Người dùng bật tùy chọn giảm chuyển động trong hệ điều hành thường vì chuyển động liên tục khiến họ chóng mặt hoặc mất tập trung. Loader lại là chuyển động lặp vô hạn, nên cần xử lý riêng. Công cụ đưa ra hai lựa chọn. Chạy chậm lại 3 lần giữ được tín hiệu đang tải nhưng dịu hơn nhiều, đây là lựa chọn cân bằng cho phần lớn giao diện. Dừng hẳn tắt mọi animation, loader đứng yên như một biểu tượng, còn câu thông báo ẩn vẫn còn cho trình đọc màn hình. Nếu chọn dừng hẳn, nên có thêm một dòng chữ như Đang tải hiển thị cạnh loader để người dùng biết trang chưa bị treo.

Spinner, thanh tiến trình hay skeleton: chọn loại nào

Spinner như vòng tròn, chấm nhảy hợp với thao tác ngắn và không biết trước thời gian: bấm nút gửi, tải lại một bảng nhỏ. Thanh tiến trình không xác định hợp đặt ở đầu trang hoặc đầu một khung khi cả vùng đang chờ dữ liệu, vì nó chiếm ít chỗ và không che nội dung. Skeleton phù hợp khi bạn biết bố cục sắp hiện ra như danh sách bài viết, thẻ sản phẩm: vẽ sẵn các khối xám theo đúng hình dạng giúp trang không bị giật khi dữ liệu về. Nếu biết chính xác phần trăm đã xong, ví dụ tải tệp lên, hãy dùng thẻ progress của HTML với giá trị cụ thể thay vì loader không xác định.

Tùy biến sau khi dán mã

Khối CSS bắt đầu bằng các biến --loader-color, --loader-track, --loader-size, --loader-thickness và --loader-speed. Muốn có một loader nhỏ màu trắng trên nút bấm, bạn không cần tạo thêm mã mà chỉ ghi đè biến: đặt style="--loader-size: 16px; --loader-color: #fff" trên thẻ, hoặc viết một class phụ. Màu rãnh nhạt --loader-track được công cụ tính sẵn bằng màu chính với độ trong suốt 20%, nếu đổi màu chính bằng tay, hãy đổi cả biến này. Tên keyframes được đặt theo tên class, ví dụ loader-spin, nên nếu đổi tên class trong mã, nhớ đổi cả tên keyframes để không bị trùng với mã khác trên trang.

Tương thích trình duyệt

Các mẫu dùng những tính năng CSS đã được Chrome, Edge, Firefox và Safari hỗ trợ từ lâu như animation, transform, conic-gradient, mask, aspect-ratio, biến CSS và calc(). Mẫu cung mờ dần khai báo cả -webkit-mask và mask để chạy trên các bản Safari cũ hơn. Trình duyệt quá cũ như Internet Explorer không hỗ trợ biến CSS nên loader sẽ không hiện, trường hợp này hiện rất hiếm. Khi xem thử trên trang công cụ, loader chạy bằng đúng đoạn CSS bạn sẽ sao chép, nên những gì bạn thấy chính là kết quả trên trình duyệt đang dùng.

Giới hạn cần biết

Công cụ chỉ có loader dạng CSS thuần với các mẫu cố định, không vẽ loader theo logo hay hình SVG tùy ý. Độ dày nét bị giới hạn tối đa bằng nửa kích thước để hình không vỡ. Mẫu skeleton là một khối chữ nhật đơn, muốn mô phỏng cả thẻ gồm ảnh và vài dòng chữ thì cần ghép nhiều khối với kích thước khác nhau. Loader không tự biết khi nào dữ liệu tải xong, việc hiện và ẩn loader vẫn do mã của bạn đảm nhiệm. Công cụ cũng không kiểm tra độ tương phản màu loader với nền trang, hãy xem thử bằng nút Nền sáng, Nền tối và chọn màu đủ nổi.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• css loader
• css loader generator
• css spinner
• loading css
• hiệu ứng loading css
• spinner css thuần
• tạo loader online
• loading animation css
• css loading dots
• skeleton loading css
• progress bar css indeterminate
• vòng tròn loading css
• loader không cần javascript
• role status loading
• prefers-reduced-motion loader
• tailwind spinner
• hiệu ứng chờ tải trang
• css pulse animation
• ripple loader css