Trình tạo bộ tải / Spinner CSS

Lịch sử ngắn gọn của animation CSS hỗ trợ spinner của bạn

Quy tắc @keyframes và viết tắt animation mà trình tạo này tạo ra được định nghĩa trong CSS Animations Module Level 1. Working Draft đầu tiên của W3C được công bố vào ngày 20 tháng 3 năm 2009 và đặc tả cuối cùng đạt được Khuyến nghị W3C vào ngày 11 tháng 12 năm 2018, chín năm sau. Vào lúc đó, mọi trình duyệt được phát hành đã hỗ trợ cú pháp này trong nhiều năm: Safari 4 (tháng 6 năm 2009) với tiền tố -webkit-, Firefox 5 (tháng 6 năm 2011), Internet Explorer 10 (tháng 10 năm 2012), và không có tiền tố bởi Chrome 43 vào tháng 4 năm 2015. CSS Animations Module Level 2 là Working Draft hiện tại và thêm các animation được điều khiển bởi cuộn thông qua animation-timeline (được phát hành trong Chrome 115, tháng 7 năm 2023; Safari và Firefox theo sau vào cuối năm 2024). Sự quay trong preset «spinner» đến từ CSS Transforms Module Level 1, một đặc tả riêng biệt ở Candidate Recommendation từ tháng 2 năm 2019 nhưng được phát hành rộng rãi: transform: rotate(360deg) tại 100% bên trong khối @keyframes là cái làm cho vòng quay.

Khả năng tiếp cận không phải tùy chọn: tùy chọn «Giảm chuyển động»

Mọi hệ điều hành phát hành kể từ năm 2014 đều có cài đặt khả năng tiếp cận «Giảm chuyển động», macOS «Giảm chuyển động» (trong Trợ năng → Hiển thị), iOS «Giảm chuyển động», Windows «Hiển thị animations», Android «Xóa animations», GNOME «Bật animations» tắt. Media query prefers-reduced-motion (được định nghĩa trong Media Queries Level 5, Working Draft công khai đầu tiên của W3C tháng 11 năm 2017) cho phép CSS của bạn phát hiện tùy chọn này và dừng spinner. Luôn bao bọc bất kỳ spinner nào trong:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

Tiêu chí thành công WCAG 2.1 2.3.3 «Animations từ Tương tác» (Mức AAA, Khuyến nghị W3C 5 tháng 6 năm 2018) yêu cầu rằng bất kỳ animation chuyển động nào được kích hoạt bởi tương tác có thể bị vô hiệu hóa trừ khi chuyển động là cần thiết. Một spinner hiếm khi cần thiết. WCAG 2.2 (tháng 10 năm 2023) kế thừa cùng quy tắc.

Đối với trình đọc màn hình, bao bọc spinner trong <div role="status" aria-live="polite"> với văn bản «Đang tải…» được ẩn về mặt thị giác. Khi tải hoàn tất, thay thế nội dung; vùng live thông báo «Đã tải» cho công nghệ hỗ trợ mà không la hét. Đặt aria-busy="true" trên vùng chứa khi đang tải và aria-busy="false" sau đó. Mẫu này được ghi lại trong chương vùng live của Hướng dẫn Thực hành Tác giả ARIA của W3C.

Tại sao spinner CSS vẫn mượt ở 60 fps

Các pipeline render của trình duyệt hiện đại có ba giai đoạn: layout (tính toán vị trí), paint (lấp đầy pixel), và composite (kết hợp các lớp trên GPU). Các thuộc tính transform và opacity là hai cái duy nhất bỏ qua layout và paint và chạy hoàn toàn trên thread compositor. Animation chúng về cơ bản là miễn phí ở bất kỳ framerate nào. Animation width, height, top, left, margin, hoặc bất cứ thứ gì thay đổi box model buộc một lần layout-và-paint đầy đủ trên mỗi frame và nhanh chóng giảm xuống dưới 60 fps trên các thiết bị thấp cấp. Mỗi preset trong trình tạo này animation chỉ transform và opacity vì lý do này. Nếu bạn cần một gợi ý cho trình duyệt, will-change: transform (được định nghĩa trong CSS Will Change Module Level 1, W3C Candidate Recommendation 26 tháng 4 năm 2022) thăng cấp phần tử lên lớp compositor riêng của nó; sử dụng dè dặt vì mỗi lớp tốn bộ nhớ GPU.

Khi nào một spinner là câu trả lời đúng, và khi nào thì không

Trong Response Times: The 3 Important Limits (1993, được tái xác nhận năm 2014), Jakob Nielsen của Nielsen Norman Group đã định nghĩa ba ngưỡng nhận thức: 0,1 giây là «tức thì», 1 giây là giới hạn cho dòng suy nghĩ không bị gián đoạn, 10 giây là giới hạn để giữ sự chú ý của người dùng. Ánh xạ chiến lược loader của bạn theo những giới hạn này:

• Dưới 1 giây: không chỉ báo. Một spinner nhấp nháy trong 300 ms tệ hơn không có spinner: mắt ghi nhận chớp tắt là một lỗi.
• 1 đến 5 giây: một spinner không xác định hoặc một thanh kiểu barber-pole. Cho người dùng biết «có điều gì đó đang xảy ra» mà không cam kết về một khoảng thời gian.
• 5 đến 10 giây: một <progress max="100" value="42"> xác định với phần trăm. Người dùng chịu đựng một sự chờ đợi dài hơn khi họ có thể thấy tiến trình.
• Điều hướng route SPA: một màn hình khung xương (các hộp xám placeholder bắt chước bố cục cuối) cảm thấy nhanh hơn một spinner. Luke Wroblewski đã đặt ra thuật ngữ trong bài đăng tháng 3 năm 2013 Mobile First Patterns; «shimmer» của Facebook (2014) và Material 2 của Google (tháng 5 năm 2018) đã làm cho nó trở thành xu hướng chính.

Các hàm easing và mỗi hàm cảm nhận như thế nào

Thuộc tính animation-timing-function (và CSS Easing Functions Module Level 1, Candidate Recommendation 6 tháng 12 năm 2022) chọn cách giá trị tiến triển giữa các keyframe:

• linear, tốc độ không đổi. Đúng cho một spinner liên tục; sai cho bất cứ thứ gì giảm tốc vào trạng thái cuối.
• ease, ease-in, ease-out, ease-in-out, bí danh từ khóa cho các đường cong cubic bezier phổ biến. Mặc định trình duyệt là ease.
• cubic-bezier(x1, y1, x2, y2), đường cong tùy chỉnh với bốn float trong [0, 1]. cubic-bezier(.25, .1, .25, 1) là đường cong «ease» chuẩn. Hãy thử cubic-bezier(.68, -.55, .27, 1.55) để có hiệu ứng nảy «overshoot».
• steps(n, jump-end), các bước nhảy rời rạc, lý tưởng cho loader chấm thay đổi trạng thái mà không nội suy.

Lỗi thường gặp

• Vận chuyển một spinner mà không có prefers-reduced-motion. Người dùng có rối loạn tiền đình, kích hoạt đau nửa đầu, hoặc nhạy cảm chú ý bị tấn công bởi mỗi vòng quay trên web. Sửa chữa là hai dòng CSS.
• Quên role="status" và văn bản ẩn về mặt thị giác. Một spinner chỉ quay về mặt thị giác không nói gì với người dùng đọc màn hình.
• Tốc độ animation dưới 0,5 giây mỗi chu kỳ. Một spinner hoàn thành trong 0,3 giây cảm thấy điên cuồng và đọc như «lỗi» đối với nhiều người dùng. 1 đến 1,5 giây mỗi chu kỳ là phạm vi thoải mái.
• Animation các thuộc tính layout. Animation width, margin, hoặc top gây ra layout thrashing. Hãy gắn với transform và opacity.
• Hiển thị một spinner cho mỗi thao tác. Nếu dữ liệu đến trong vòng 100 ms, spinner nhấp nháy và đọc như một lỗi. Trì hoãn spinner 200 đến 300 ms với một setTimeout mà bạn xóa khi thành công.
• Quên căn giữa spinner. Một `.spinner` lơ lửng ở phía trên bên trái của một phần vì container của nó không phải là container flex/grid là lỗi thị giác phổ biến thứ hai.

Thêm câu hỏi thường gặp

Các spinner này sẽ hoạt động trên trình duyệt cũ không?

Tất cả các trình duyệt hiện đại (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) hỗ trợ @keyframes và transform mà không có bất kỳ tiền tố nào. Internet Explorer 10 và 11 yêu cầu tiền tố -ms- ở một số nơi nhưng nếu không thì hoạt động. IE 9 và thấp hơn không có hỗ trợ animation CSS: quay lại với GIF động, hoặc sử dụng @supports (animation: spin 1s) để phát hiện tính năng.

Làm thế nào để dừng spinner khi nội dung tải?

Hoặc xóa phần tử khỏi DOM, ẩn nó với display: none hoặc thuộc tính hidden, hoặc tạm dừng animation với animation-play-state: paused. Tạm dừng là rẻ nhất nếu bạn có thể hiển thị nó lại. Nếu bạn đã sử dụng mẫu ARIA, cũng đặt aria-busy="false" trên container và thay thế văn bản tải bằng thông báo trạng thái đã tải.

Tôi có thể tùy chỉnh màu sắc spinner xa hơn những gì picker cho phép không?

Có. CSS đầu ra sử dụng các giá trị hex / rgb / hsl thông thường; thay chúng bằng các biến CSS (var(--brand-primary)) để spinner tuân theo hệ thống thiết kế của bạn. Đối với spinner hai màu, chỉnh sửa viết tắt border-color: border-color: var(--brand) transparent transparent transparent cho ngoại hình cổ điển «cung một phần tư».

Tại sao không chỉ sử dụng animation SVG hoặc Lottie?

Spinner CSS có trọng lượng dưới 200 byte, không cần yêu cầu thêm, không cần runtime JavaScript, và render trước khi bất kỳ tài nguyên bên ngoài nào tải. SVG rất tốt cho hình dạng phức tạp; Lottie rất tốt cho animation do nhà thiết kế tạo ra từ After Effects. Đối với một chỉ báo chung «có thứ gì đó đang tải», CSS là công cụ rẻ nhất làm tốt công việc.

Có gì được theo dõi hoặc gửi đến máy chủ không?

Không. Trình tạo chạy hoàn toàn trong JavaScript của trình duyệt của bạn. Lựa chọn màu sắc, điều chỉnh kích thước và CSS được sao chép không bao giờ rời khỏi trang. Xác minh trong tab Mạng của DevTools.