Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Top Các Thư Viện Progress Bar Javascript

Top Các Thư Viện Progress Bar Javascript


Ngày 17 Tháng 6 Năm 2020

Bây giờ hãy cùng mình đi vào tìm hiểu những thư viện Progress Bar phổ biến trong năm 2021 nhé!

Progress Bar Là Gì?

Progress Bar là thanh tiến trình giúp người dùng có thể xem được tiến trình của một hành động nào đó trên trang web của chúng ta như là khi tải trang, upload file, hình ảnh... Ngoài ra bạn có thể kiểm tra thời gian thực hiện của một hành động để tối ưu trang web hơn. Thư Viện Progress Bar giúp chúng ta dễ dàng xây dựng những thanh tiến trình với thiết kế đa dạng, những hiệu ứng chuyển động đẹp mắt cũng như được bổ sung thêm nhiều tính năng mới nhằm tăng trải nghiệm người dùng.

PROGRESS BAR.JS là một thư viện mã nguồn mở được xây dựng bằng Javascript giúp bạn dễ dàng tạo các thanh tiến trình với nhiều loại hình dạng khác nhau và responsive trên nhiều màn hình thiết bị phổ biến ngày nay. Bạn cũng có thể thiết lập dễ dàng thông qua npm, bower hoặc tải về để sử dụng. Ngoài ra nó cũng có một trang hướng dẫn đầy đủ về các tính năng mà chúng ta có thể sử dụng trong thư viện này và các trang demo với đoạn code được viết sẵn giúp bạn dễ dàng hơn trong việc áp dụng vào trang web của mình.

PROGRESS BAR.JS

Nanobar là một thư viện mã nguồn mở được viết bằng javascript thuần với kích thước chỉ khoảng ~699 bytes(khi đã nén) giúp bạn tạo thanh tiến trình nhanh chóng cũng như tối ưu hiệu suất cho trang web của mình. Bạn chỉ cần tải về và gọi lệnh new Nanobar(option) với option là những thuộc tính mà bạn muốn điều chỉnh để phù hợp cho trang web. Nó thì chạy được trên hầu hết các trình duyệt phổ biến hiện nay còn đối với Internet Explorer từ IE7+ trở lên.

PROGRESS BAR.JS

Nprogress là một thư viện mã nguồn mở được lấy cảm hứng từ Google, Youtube, Medium với hơn 21k sao đánh giá trên github giúp bạn tạo thanh tiến trình một cách nhanh chóng với thiết kế đơn giản, đẹp mắt và tích hợp nhiều tính năng cho chương trình như là xác định thời gian hiệu ứng chuyển động, thiết lập điểm bắt đầu trong thanh tiến trình... Và bạn cũng có thể thiết lập lại style cho thanh tiến trình trong trang web thông qua file nprogress.css mà thư viện cung cấp nhé!

nprogress

Pace là thư viện được xây dựng bởi javascript với điểm đặc biệt là bạn không phải chèn bất kỳ đoạn mã nào vào trang HTML. Chúng ta chỉ cần tải file pace.js và chọn theme CSS trong trang demo thì chương trình sẽ tự động thiết lập thanh tiến trình cho quá trình tải trang hay xử lý các tác vụ Ajax trong trang web. Thật đơn giản và nhanh chóng phải không nào!

Pace

ProgressJs là thư viện mã nguồn mở được xây dựng bằng Javascript và CSS3 giúp bạn có thể tạo thanh tiến trình cho bất kỳ đối tượng nào trên trang web như là hiển thị tiến trình tải hình ảnh, các cả các ô nhập liệu trong trang HTML (Bạn xem ở trang demo nhé)... Nó cũng giúp bạn dễ dàng tùy chỉnh và mở rộng thông qua các thuộc tính được cung cấp bởi thư viện.

ProgressJs

Loadie.js là thư viện mã nguồn mở được xây dựng bằng Jquery với kích thước nhỏ gọn giúp bạn hiển thị thanh tiến trình cho quá trình tải trang. Bạn có thể thiết lập nó trực tiếp trong HTML bằng CDN hoặc tải về để sử dụng nhé. Do là phiên bản đầu tiên nên nó cũng không có nhiều thuộc tính bổ sung thêm cho trang web của chúng ta. Nếu bạn yêu thích sự đơn giản và tối ưu hiệu suất thì mình nghĩ thư viện này là một lựa chọn hợp lý.

Loadie.js

Material Progress là thư viện mã nguồn mở được thiết kế theo phong cách Google Material Design. Bằng việc kết hợp với CSS3 và không sử dụng thư viện nào nên bạn có thể áp dụng cho nhiều loại trang web khác nhau. Nó có 4 loại thanh tiến trình để giúp bạn có lựa chọn đa dạng hơn và chúng ta chỉ cần gọi nó bằng template: 2(Từ 1 -> 4) trong quá trình thiết lập là có thể sử dụng cho trang web của mình rồi.

Material Progress

Jquery-circle-progress đúng như tên gọi của nó là giúp bạn xây dựng thanh tiến trình theo hình tròn với công nghệ sử dụng là Jquery. Ngoài ra nó cũng có các thuộc tính giúp chúng ta linh hoạt trong việc áp dụng vào trang web như là thiết lập giá trị mặc định, kích thước vòng tròn, màu sắc, hiệu ứng chuyển động... Bạn cũng có thể tham khảo thêm các đoạn mã thanh tiến trình được viết sẵn trong trang demo nhé.

jquery-circle-progress

scrollProgress là thư viện được xây dựng bằng Javascript giúp bạn tạo thanh tiến trình dựa vào vị trí màn hình của người dùng. Theo mình thấy nó hay được sử dụng phổ biến trong các bài viết ở trên blog vì nó giúp người dùng có thể xác định được tiến trình đọc nội dung thông qua thanh tiến trình.

scrollProgress

LoadGo là thư viện được xây dựng bằng Javascript cho phép bạn tạo thanh tiến trình cho đối tượng hình ảnh img trong trang web. Nó giúp người dùng có cảm giác thú vị khi thấy hình ảnh từ từ được tải thông qua hiệu ứng chuyển động mà thư viện cung cấp. Ngoài ra nó cũng có các thuộc tính giúp bạn dễ dàng tùy biến như là điều chỉnh độ mờ hình ảnh, màu nền, tự động resize... Vì là mã nguồn mở nên bạn có thể sử dụng cho bất kỳ loại trang web nào nhé!

LoadGo

Mộ Số Thư Viện Progress Bar Khác

μProgress Goal Progress LoadingBar.js

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện progress bar hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!