Xây dựng các thanh tiến trình đáp ứng tùy chỉnh với ProgressBar.js
Thanh tiến độ được biết đến rộng rãi bởi hầu hết người dùng trên web. Đối với các nhà phát triển, đó thường là một quá trình phức tạp để tạo một thanh tiến trình từ đầu. Nhưng vơi ProgressBar.js bạn không cần phải!
Thư viện mã nguồn mở miễn phí này không phụ thuộc và hỗ trợ tất cả các trình duyệt chính, bao gồm IE9+.
Theo mặc định, bạn có thể sử dụng một thanh đơn giản, hoặc bạn có thể chọn từ một vài hình dạng cơ bản, nhu la:
- Dòng đơn
- Hình bán nguyệt
- Vòng tròn đầy đủ
- Quảng trường
- Tam giác
Bạn cũng có thể thiết kế hình dạng tùy chỉnh của riêng bạn chẳng hạn như một trái tim, một đám mây hoặc thậm chí là chữ của logo trang web của bạn. Cấp điều này sẽ mất một số nỗ lực nhưng kết quả cuối cùng có thể đáng kinh ngạc.
Thư viện hoạt động trên đường dẫn SVG, vì vậy nếu bạn có thể xây dựng một hình dạng phác thảo sử dụng đánh dấu SVG bạn có thể làm động nó với thư viện thanh tiến trình này.
Ảnh động cũng có thể bao gồm văn bản hoặc là có các mẫu bắt đầu / dừng tùy chỉnh. API đầy đủ có thêm chi tiết với các tùy chọn / cuộc gọi lại rằng bạn có thể xem xét lúc rảnh rỗi.
ProgressBar.js cũng có một số nhỏ hướng dẫn cài đặt nơi bạn có thể tải về và thiết lập kịch bản sử dụng Bower, npm hoặc trang GitHub đơn giản hơn.
Và nếu bạn xây dựng bất cứ điều gì tuyệt vời, bạn có thể gửi mã của bạn vào repo GitHub. Người tạo ra dự án, Kimmo Brunfeldt có một vấn đề GitHub mở nơi bạn có thể gửi thiết kế tùy chỉnh được đưa vào thư viện.
Bạn có thể thêm thanh tiến trình hoạt hình để đăng ký trang, tải lên các trường hoặc lên bất kỳ trang web nào dưới dạng trình tải trước. Các tùy chọn chỉ bị giới hạn bởi chi tiết như thế nào bạn sẵn sàng nhận.
Ví dụ, tôi thích bản demo máy đo mật khẩu vì nó phục vụ một mục đích thực sự và mang lại lợi ích cho trải nghiệm người dùng. Ví dụ này đến đóng gói với plugin, vì vậy bạn có thể sao chép nó và sửa đổi nó theo ý thích của bạn.
Nhìn thêm ví dụ, xem trang chủ của ProgressBar.js hoặc xem qua fiddle này giới thiệu hoạt hình trái tim.
